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Avant-propos 



Pourquoi un tel ouvrage ? 



ATTENTION : note aux neophytes en programmation 

A la fin de la lecture de cet avant-propos, si les quelques pages qu'il contient vous semblent trap abstraites 
lisez le chapitre 1 et passez directement au troisieme. 



Le manuel officiel de I'ActionScript 3 

Si vous avez deja ouvert la documentation officielle du langage ActionScript 3, vous aurez 
surement remarque a quel point il est difficile d'en comprendre les explications qui, bien 
que tres precises, demeurent tres abstraites pour les neophytes en programmation. 

En tant qu'enseignant, j'aurais tendance a dire qu'a vouloir etre trap precis, on perd 
souvent en clarte ! 

La societe Adobe n'a malheureusement pas le choix car ce manuel dedie au langage 
ActionScript s'adresse a tout le monde, y compris les developpeurs les plus experimen- 
tes, et ces derniers ont egalement besoin d'informations qui leur parlent. Le guide de 
reference propose par la societe editrice se doit done d'etre aussi exhaustif que possible. 

Mais ce manuel est-il si abstrait pour les debutants en programmation ? Prenons la definition 
de la mefhode startDrag( ) de la figure A-l. Nous allons decouvrir que, selon le niveau de 
chacun, on peut plus ou moins comprendre certains points. Analysons ensemble les 
quatre parties mises en avant au travers des cadres numerates de 1 a 4. 

Point numero 1 : seuls les developpeurs ayant deja un bon niveau en programmation peuvent 
interpreter le sens de cette ligne d' instruction. Elle permet neanmoins de comprendre 
tres rapidement la syntaxe de la mefhode accompagnee des parametres obligatoires et 
facultatifs. 

Point numero 2 : il s'agit certainement de 1' explication la plus abordable par 1' ensemble 
des developpeurs, neophytes et confirmes, car elle definit le fonctionnement et/ou 
l'utilite du terme. 
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Point numero 3 : cette partie de l'explication est primordiale car elle precise les parame- 
tres a utiliser lorsque le terme est une methode. Malheureusement, elle n'est comprehen- 
sible qu'a partir du moment oil un developpeur possede deja les connaissances requises 
pour programmer. 

Point numero 4 : par analogie ou par opposition, il est parfois interessant de comprendre 
des termes ayant une relation avec celui que vous cherchez a maitriser initialement. 

Details de la methode 
startDragO methode Q 

public functicn atactDrag llcckCenter tBcclean - zalae, bcunda l Rectangle — nulljsvcid 

Version du langage ; ActionScript 3.0 

Version du lecteur ; Flash Player S — 



Permet a I'utilisateur de Fair e glisser le sprite specifie. II reste possible de Fair e glisser le sprite jusqu'a 
I'arret explicite de cette action par un appel a la methode sprite. atcpOrag :> ou lorsqu'un autre sprite 
est rendu deplacable. Vous ne pouvez deplacer qu'un seul sprite a la fois. 



Parametres 



LodkCanbBr:BoDiean (default = faiae) — Specifie si le sprite a deplacer doit etre verrouille au 
centre de la position de la souris (true) ou verrouille au point ou I'utilisateur a clique sur le sprite en 
premier lieu (false). 

bounds : iir:c ...-:-: q _c (default = :-:-..:_) Valeur relative aux coordonnees du parent du sprite qui 
specifie un rectangle de delimitation pour le sprite. 



Voir aussi 



dropTarget 
stopDragf) 



Example 

Utilisation des exemples 

L'exemple suivantcree un sprite circle etdeux sprites -..,irgc-_. La methode j;i.--^.-ag(i est 
appelee sur le sprite circle lorsque I'utilisateur place le curseur sur le sprite et appuie sur le 
bouton de la souris, et lorsque la methode stcpDrag : :. est appelee si I'utilisateur relache le 
bouton de la souris. Cette operation permet de faire glisser le sprite. Lorsque I'utilisateur relache 
le bouton de la souris, la methode mcuseReieaae u est appelee, qui en retour suit la propriete 
name de I'objet drcpiarget — celui vers lequel I'utilisateur fait glisser le sprite circle : 

Figure 

Les explications de I' aide officielle de V ActionScript 3 ne sontpas toujours comprehensibles pour tout public. 

import flash. display .Sprite; 
import flash. events. MouseEvent; 

var ci rcle:Sprite = new SpriteO; 
ci rcle. graphics. begin Fill (OxFFCCOO) ; 
circle. graphics. drawCi rcle(0, 0, 40); 
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var targetl:Sprite = new SpriteO; 
targetl. graphics. beginFilKOxCCFFOO); 

targetl. graphics. drawRect(0, 0, 100, 100); 
targetl .name = "targetl"; 

var target2:Sprite = new SpriteO; 
target2. graphics. beginFilKOxCCFFOO); 
target2. graphics. drawRect(0, 200, 100, 100); 
target2.name = "target2"; 

addChild(targetl); 
addChild(target2); 
addChild(circle); 

ci rcle. add Event Li stener(MouseEvent .M0USE_D0WN, mouseDown) 

function mouseDown(event:MouseEvent) :void { 

ci rcle.startDragt ) ; 
} 
circle. add Event Li stener(MouseEvent.MOUSE_UP, mouseRel eased ) ; 

function mouseReleased(event:MouseEvent) : void { 

ci rcle.stopDrag( ) ; 

t race (circle.dropTarget. name) ; 
} 

Comme vous pouvez le constater, si quelqu'un vous dit : pour realiser un puzzle, tu dois 
utiliser la methode startDrag( ), vous pourrez difficilement vous en sortir avec les expli- 
cations ci-dessus, surtout si vous n'avez jamais programme. 

La presentation de ce script dans un contexte precis le rend, paradoxalement, encore 
moins evident a comprendre. L'utilisateur du manuel doit d'abord analyser le script avant 
de decouvrir les parties indispensables pour realiser un glisser-deposer. 

Rappelons que l'aide officielle du langage vous sera un jour tres utile car il s'agit d'un 
manuel extremement bien concu, mais vous devez d'abord comprendre les concepts de la 
programmation et maitriser ses mecanismes. Cette maitrise passera certainement par une 
longue phase de pratique du langage. En attendant, si ce referentiel ne peut vous aider, il 
vous reste Internet et les livres pour apprendre l'AS3 (ActionScript 3). 

Sur Internet, les forums constitueront pour vous une aide precieuse lorsque vous rencon- 
trerez des problemes. Le plus repute dans la communaute francophone de Flash et de 
1' ActionScript est celui de mediabox : http://flash.mediabox.fr/index.php 



Programmation sequentielle ou bien orientee objet ? 

A ce jour, il est difficile d'evaluer si la programmation sequentielle (ou structured) est plus utilisee en AS3 que la 
programmation orientee objet ; mais il est pour llnstant rare de trouver des explications qui n'aient pas 
une approche objet. Vu la difficile maitrise des langages orientes objet et le succes de Flash, il est fort 
probable que la programmation sequentielle aura un bel avenir en AS3. 
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Concernant les publications papier, si vous avez achete un livre pour apprendre l'AS3, 
c'est que vous savez deja quels sont les avantages et les inconvenients d'une telle 
methode d' acquisition. Allons tout de meme plus loin et presentons l'approche de cet 
ouvrage. 



Differences entre IAS1, IAS2 et IAS3 

L' ActionScript 3 constitue un tournant majeur dans l'histoire de Flash et plus particulie- 
rement du langage AS. Sans entrer dans les details, nous pouvons tout de meme dire que 
cette version risque, une fois encore, de creuser l'ecart entre les developpeurs confirmes 
et les neophytes en matiere de programmation. Pour commencer, l'un des objectifs de ce 
livre est de reduire cet ecart. 

L'approche de la programmation etant differente entre l'ASl et l'AS2, un ecart s'etait 
deja creuse entre ces deux populations. Aujourd'hui, tous les utilisateurs de l'AS2 vont 
tout naturellement passer a l'AS3. Pour ceux qui programment en AS1, ce livre tend a 
demontrer que 1' AS3 leur est tout de meme accessible. Nous reviendrons sur ce point. 

Avant d'expliciter davantage l'approche pedagogique de ce livre face au besoin d'appren- 
tissage de 1' AS3, revenons sur les differences qui separent les trois versions. 



La vraie difference entre l'ASl et l'AS2 

Pour certains anciens utilisateurs de Flash, la difference entre l'ASl et l'AS2 se caracterise, a tort, par le 
fait de placer les scripts d'une animation sur les occurrences (AS1) ou sur I'image-cle (AS2). Les explica- 
tions ci-dessous vont vous demontrer le contraire. 



Ce qui caracterise 1' ActionScript 1, c'est le fait de placer les scripts d'une animation sur 
l'image-cle d'un scenario (le scenario general ou celui d'un clip) ou sur une occurrence. 
La creation de l'ASl n'est pas vraiment datee, mais nous pouvons dire qu'avant 2000 (la 
sortie de Flash 5), le systeme de gestion des scripts ne representait pas vraiment un 
langage a part entiere. De 2000 a 2003, l'ASl aura connu deux syntaxes pour gerer ses 
evenements : les scripts pouvaient etre places sur les occurrences ou sur l'image-cle pour 
effectuer une meme action. 

Les utilisateurs de Flash peu experimentes en programmation preferaient placer les scripts 
sur les occurrences (de bouton et de clips), cette logique etant plus comprehensible pour 
eux : on place le script sur le bouton sur lequel l'utilisateur cliquera pour declencher une 
action. Par ailleurs, la syntaxe etait plus simple. Les utilisateurs plus experimentes en 
programmation preferaient placer tout le code d'une animation au meme endroit, sur une 
image -cle du scenario principal, leur argument etant le suivant : le debogage est plus 
simple car le code est centralise. Au sein de la communaute des utilisateurs de Flash, puis 
ensuite des developpeurs Flash, cette double approche du langage a constitue deux groupes 
d'utilisateurs. 



Avant-propos 



Utilisateurs de Flash et developpeurs Flash 

C'est avec le temps qu'est nee la difference entre les utilisateurs de Flash et les developpeurs Flash. De 
2000 a 2005, un utilisateur de Flash etait qualifies de flasheur, meme s'il utilisait considerablement Action- 
Script. Progressivement, a partir de 2005, le marche de I'emploi a fait la difference entre les flasheurs qui 
sont principalement represents par les utilisateur de Flash au travers de son interface (utilisation impor- 
tante du scenario) et les developpeurs Flash qui font appel principalement au code pour controler une 
animation. 



A la sortie de l'AS2, en 2003 avec l'arrivee de Flash MX2004, les developpeurs qui 
avaient 1' habitude de placer tout leur code sur une image -cle ont tout naturellement opte 
pour le nouveau mode de programmation : l'utilisation et l'appel d'un fichier externe pour 
redigerles scripts d'une animation. 

En resume, l'ASl se caracterise par le fait de placer ses scripts dans 1' animation alors que 
l'AS2 fait appel a des fichiers externes. En programmation il existe deux approches : la 
programmation orientee objet et la programmation sequentielle appelee aussi program- 
mation structuree. La premiere approche est done tout naturellement associee a l'AS2 et 
la deuxieme a l'ASl. 



Creation dun nouveau document dans Flash CS3 

Aujourd'hui, lorsque vous demandez la creation d'un nouveau document dans Flash CS3, vous pouvez 
opter pour un fichier Flash AS2 ou un fichier Flash AS3. II est important de comprendre qu'Adobe a decide 
de regrouper les versions AS1 et AS2 sous une meme etiquette car elles utilisent des syntaxes differentes 
mais un meme langage. Les termes sont identiques, seules quelques specificites les differencient. 
L'ActionScript 3 n'utilise plus du tout la meme syntaxe, mais surtout, le langage est completement different 
(par exemple, la propriete ._x en AS2 s'ecrit .x en AS3). Lorsque la societe Adobe fait reference a l'AS2, 
elle veut marquer la difference entre les deux registres de vocabulaires de l'ASl /AS2 et de l'AS3 (les 
approches de programmation orientee objet et sequentielle etant sous-entendues pour l'AS2). 



Mais pourquoi tous les utilisateurs ne sont-ils pas passes a 1' AS2 ? C'est effectivement la 
question que nous devons nous poser, car la reponse que nous allons formuler d'ici quel- 
ques lignes va, par la meme occasion, nous faire comprendre la difference qui existe 
entre l'AS3 et l'AS2 ! 

II est important de comprendre que la programmation orientee objet, qui est done asso- 
ciee a l'AS2 et l'AS3 necessite un bon niveau en programmation. Parallelement, Flash 
est un logiciel qui connait depuis 3 a 4 ans un enorme succes aupres de publics tres 
divers, y compris des utilisateurs ne connaissant pas du tout la programmation et n'ayant 
pas un grand besoin en terme de developpement informatique. Pourquoi un imprimeur 
aurait besoin d'apprendre un langage complexe pour realiser une animation avec une 
legere interactivite ? Bien evidemment, nous avons pris ce corps de metier pour notre 
exemple, mais il en existe bien d'autres. Par ailleurs, pourquoi des personnes talentueu- 
ses dans leur domaine devraient-elles apprendre un langage de programmation pour 
realiser une animation interactive ? 
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Flash, un logiciel a tout faire 

D'une fagon generate, tous les metiers de la communication ont trouve dans ce logiciel un moyen facile et 
rapide de diffuser une information sur Internet. Flash proposant aussi de publier des animations pour les 
supports off-line, un marche supplementaire s'est meme cree, remplagant par la meme occasion la 
plupart des productions realisees par le logiciel Director. 



Repondons simplement a ces deux questions en affirmant que l'AS2, avec une approche 
de programmation sequentielle (ou structuree), va malheureusement perdurer encore quel- 
ques annees, car les besoins en programmation ne sont pas les memes pour tout le 
monde. Pourquoi utiliser le terme malheureusement dans la phrase precedente ? Est-ce 
un jugement subjectif ? Non, cela signifie simplement que la difference que nous avions 
entre les deux communautes d'utilisateurs de 1'ActionScript va non seulement perdurer 
mais aussi se renforcer entre 1' AS2 (a l'approche de programmation sequentielle) et 1' AS3. 

L' ActionScript 3 est un langage completement oriente objet car la redaction des lignes 
d' instructions qui composent un script ou un programme est tres precise. La structure d'un 
document a completement ete repensee ; le developpeur manipule a present des objets 
imbriques et non plus des occurrences de type clip ou bouton, comme c'etait le cas dans 
les version anterieures a Flash CS3. Cette version du langage n'est-elle done pas plus 
accessible aux developpeurs novices ? Pour ces derniers la reponse est simple : vous 
pouvez developper en AS 3 avec une approche sequentielle ! 

L'un des objectifs de ce livre est non seulement de presenter en parallele les deux 
syntaxes (programmation orientee objet et programmation sequentielle), mais aussi de 
demontrer qu'il est possible d'apprendre 1' AS3 en etant un debutant total en programmation. 

Pourquoi proposer a des developpeurs de programmer en AS 3 avec une syntaxe sequen- 
tielle ? Ces dernieres annees, l'enseignant que je suis est quelque peu excede face aux 
comportements de certains collegues ou developpeurs confirmes. Non, la programmation 
orientee objet n'est pas accessible a tout le monde et ce n'est pas non plus une question 
de pedagogie. II a ete assez agacant de constater, avec la montee en puissance de l'AS2, 
a quel point certains individus peuvent etre si obtus et penser que tout le monde possede 
les memes facilites. J'aurais envie de dire a ces gens-la : « Comment, vous ne savez pas 
preparer une charlotte au chocolat ? II suffit pourtant de melanger des ingredients en 
suivant une recette. . . » Ah bon, chef cuisinier e'est un metier ? 
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Approche pedagogique de ce livre 

La plupart des ouvrages dedies a l'apprentissage d'un langage informatique proposent 
une table des matieres basee sur les notions elementaires pour maitriser l'algorithme. 
C'est une excellente logique : il est ainsi plus facile de passer d'un langage a un autre. 
Une telle approche pedagogique permet egalement une montee en puissance de la diffi- 
culte en phase d'apprentissage. J'ai pu constater au long de ma carriere qu'il existe de 
nombreuses approches pedagogiques pour transmettre un savoir. Elles s'adressent toutes 
a des publics aux profils differents. 

Un etudiant qui se forme aux metiers du developpement aura besoin de connaitre les 
bases de la programmation. II devra savoir construire un algorithme, mais aussi comprendre 
et maitriser les concepts de la programmation orientee objet. Lorsque tout cela est acquis, 
il peut alors passer d'un langage a une autre assez facilement ; il doit simplement se 
familiariser avec les specificites de chacun. 

Si vous-meme connaissez deja les bases de la programmation, ce livre va vous sembler 
evident et simple. En revanche, si vos connaissances en programmation sont reduites, je 
tiens a vous rassurer : la progression du livre s'appuie sur les besoins rencontres en produc- 
tion. II sera parfois necessaire de faire quelques allers-retours d'un chapitre a un autre mais, 
dans l'ensemble, l'ordre des chapitres a ete choisi de sorte que vous puissiez programmer 
une animation Flash, meme si vous ne maitrisez pas le contenu de la partie 2 de ce livre. 

Depuis plus de 13 ans, mon metier est de transmettre mes connaissances, initialement dans 
le domaine de la PAO, puis dans les metiers du multimedia depuis l'an 2000. En plus de 
7 ans, quelque 600 a 700 personnes sont passees dans les differentes formations Flash 
que j'ai du assurer pour le compte de divers efablissements prives et publics. Ces apprenants 
ont tous bute sur les memes difficultes et sont tombes dans les memes pieges ! 

Aujourd'hui, pour apprendre un langage, il est tres simple d'acceder a une formation, mais 
cela reste couteux. De nombreuses publications papier restent alors abordables : le prix 
d'un livre est compris entre 15 et 60 euros. Pour celles et ceux qui veulent investir du 
temps, mais pas d' argent, il reste le Web qui regorge de sites, mais il faut passer un certain 
temps a chercher les bonnes adresses. En 1990, lorsque j'ai du apprendre par moi-meme a 
utiliser mes premiers logiciels, puis mes premiers langages de programmation, j ' ai rencon- 
tre les memes difficultes d'apprentissage que mes etudiants aujourd'hui (et puis le Web 
n'existait pas encore, il n'y avait pas les forums et, en dehors de la bibliotheque de la cite 
des sciences a Paris, les bibliotheques municipales ne proposaient que tres peu de publi- 
cations dans ces domaines). Je me souviens encore de ces soirees et nuits passees a essayer 
de comprendre certaines notions elementaires... Cela me permet done maintenant d' avoir 
des approches pedagogiques differentes selon les techniques a transmettre. 

Chaque nouvelle explication presentee dans ce livre s'accompagnera d'un exemple simple. 
Seulement une ou deux notions nouvelles seront utilisees a la fois afin que vous compreniez 
bien. Notre approche ne sera pas systematiquement exhaustive : trop d' informations ou des 
informations trop precises empechent bien souvent la comprehension d'une nouvelle notion. 
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Un livre dedie a la programmation orientee objet 
ou sequentielle ? 

Qui peut le plus peut le moins ! Cela resume l'approche globale de ce livre. . . 

A la lecture de la table des matieres de cet ouvrage, vous pouvez decouvrir qu'une part 
importante est consacree a l'apprentissage de la programmation orientee objet, non 
seulement au travers de chapitres dedies a ce mode de programmation, mais egalement 
au travers de nombreux exemples. 

Lorsque vous apprendrez une nouvelle notion ou technique, nous vous expliquerons le 
mecanisme general, puis s'en suivra generalement un exemple de script a placer sur une 
image -cle. Lorsque cela s'averera necessaire, nous vous presenterons egalement le script 
d'un fichier .as. 

Tous les exemples de ce livre sont telechargeables a l'adresse suivante : 

http://www.yazo.net/eyrol les 

Nous ne privilegions aucun mode de programmation car nous utilisons les deux dans la 
plupart des cas, mais nous mettons simplement en avant le script, qui est plus facile a 
apprehender. Pour les plus experimented d'entre vous, il sera tres simple de copier-coller 
les lignes d' instructions dans un fichier externe lorsqu'un script en POO ne sera pas 
presente. Rassurez-vous, pour les scripts les plus complexes de ce livre, nous vous 
presenterons un exemple dans chacun des deux modes de programmation. 

Quelques termes a connaitre 

Si vous ne connaissez pas les termes employes en programmation, il est alors indispensable 
que vous lisiez les definitions ci-dessous. Attention, elle ne sont volontairement pas 
conformes a des definitions omcielles que nous aurions pu trouver dans des livres specialises 
sur la programmation ou des sites dedies, dans la mesure ou la volonte d'etre compris de 
tous constitue notre principal objectif. Des sites comme http://www.commentcamarche.net 
vous donneront sfirement les informations que vous pourrez rechercher. 

Lorsque nous allons expliquer toutes les notions et techniques abordees dans ce livre, 
nous emploierons certains termes dont voici le sens. 

Instance : il existe deux types d'instances qui resultent de deux operations differentes. Si 
vous placez un symbole sur la scene, vous obtenez une occurrence, mais nous pourrions 
egalement dire qu'il s'agit d'une instance du symbole. En ActionScript, vous utiliserez 
parfois le mot new qui permet d'obtenir une instance de classe. Une instance est done 
representee par un mot. Lorsque vous aurez besoin d'ecouter un son dans une animation, 
vous creerez une instance de la classe Sound ( ) que vous manipulerez (charger un son dans 
cette instance, jouer le son de cette instance, regler le volume de cette instance). 

Propriete : imaginez une instance (ou occurrence) sur la scene. Si vous souhaitez controler 
sa position, sa transparence ou sa rotation, il faudra alors ecrire une ligne d' instruction 



Avant-propos 



qui fera reference au nom de l'instance et a la propriete a modifier. La transparence d'une 
occurrence constitue une des propriete d'une instance, au meme titre que son echelle 
horizontale, sa rotation, etc. En programmation orientee objet, ce terme s'etend a d'autres 
termes d'un script que nous n'evoquerons pas ici pour l'instant. 

Methode : dans un script ou un programme, vous ecrirez certains termes avec des paren- 
theses a la fin. Ces derniers sont qualifies de fonctions ou methodes et nous pourrions les 
comparer aux verbes d'une phrase. Leur role est d'agir dans un programme ; par 
exemple : creer un rectangle sur la scene, changer la casse d'un texte, regler le volume 
d'un son, charger une image sur la scene, etc. Toutes les methodes sont des fonctions, 
mais toutes les fonctions ne sont pas des methodes. Des que vous ecrivez... 

I function marcherO { 
//ligne d'instruction a executer 

il s'agit d'une fonction. Mais, dans certains cas, si cette fonction est precisement ecrite a 
l'interieur d'une classe, on la qualifie alors de methode. Dans l'exemple ci-dessus, nous 
venons de creer une methode, c'est-a-dire que vous expliquez au programme ce qu'il 
devra faire lorsque le mot marcherO sera ecrit seul dans une ligne d'instruction. 

Evenement : pour temporiser un script, vous devez utiliser un evenement. Le fait de 
survoler ou de cliquer sur une occurrence constitue un evenement. De la meme facon, si 
vous voulez executer une action lorsque la lecture d'un son est terminee, vous ferez appel 
a l'evenement soundComplete. Un evenement est un mot qui sera place a un endroit fixe 
dans une ligne d'instruction. Pour etre plus precis, cette ligne d'instruction est generale - 
ment placee dans un gestionnaire d' evenement. Nous n'expliquerons pas ce terme car le 
chapitre 3 de ce livre est consacre integralement a cette notion. 

Ligne d'instruction : elle est comparable a la phrase d'un paragraphe dans un texte ecrit 
en francais. Au meme titre qu'une phrase contient un sujet, un verbe, un complement, 
etc., une ligne d'instruction peut contenir un nom d'occurrence, une propriete, une 
methode, des mots-cles, etc. Une ligne d'instruction se termine toujours par un point- 
virgule (qui est tres souvent omis par les developpeurs Flash neophytes). 

Classe : c'est un regroupement de lignes d' instructions saisies avec une syntaxe precise 
pour structurer une partie d'un programme. Cette notion est pour l'instant trop abstraite 
pour lui donner davantage de sens. 

Package : c'est une structure du code qui englobe une classe. Cette notion est egalement 
trop abstraite, pour l'instant, pour lui donner davantage de sens. 
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L'affichage de resultats sur la scene, dans les exemples 
de ce livre 






Pour af richer un texte dans une animation Flash, il existe deux solutions, mais 
seule la premiere des deux techniques que nous allons aborder ci-dessous permet 
de visualiser un contenu textuel sur la scene, dans une animation au format SWF. 
La deuxieme technique n'est valable qu'a partir du moment ou vous travaillez 
dans TIDE de Flash. 



Un texte dynamique sur la scene 

A de nombreuses reprises, nous aurons besoin d'afficher des textes sur la scene, 
nous utiliserons done la methode suivante : 

1. Creer un texte sur la scene avec l'outil Texte (maintenez un clic sur la scene, 
faites glisser votre souris pour definir une largeur de texte, relachez le bouton de 
votre souris). 

2. Dans la partie inferieure gauche de la palette Proprietes, si cela n'est pas deja 
le cas, selectionnez le type Texte dynamique (ou Texte de saisie). 

3. Nommez l'occurrence obtenue (exemple : affichageResultat). 

4. Cliquez sur la scene puis dans la fenetre Actions afin de saisir la ligne 
d'instruction ci-dessous : 

affichageResultat. text = 3+45; 

Comme vous pouvez le remarquer, nous utilisons la chaine de caracteres .text 
derriere le nom de l'occurrence, car nous faisons reference a la propriete text de 
l'instance pour stacker l'information (le resultat du calcul). Celles et ceux qui 
avaient l'habitude d'utiliser un nom de variable en AS1/AS2 noteront que cette 
technique n'est plus valable. 

La fonction traceQ 

II existe aussi une deuxieme solution qui consiste a afficher une information dans la 
fenetre Sortie de Flash. 

Placez la ligne d'instruction ci-dessous pour tester cette fonctionnalite : 

traceC'Bonjour") ; 
ou encore : 

trace ("Bonjour, nous sommes le "+new Date( ) .getDateO) ; 

Vous aurez peut-etre remarque que nous avons utilise l'operateur + dans les paren- 
theses de la fonction traceO pour pouvoir effectuer une concatenation, e'est-a- 
dire un regroupement de plusieurs informations. 
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Introduction 



Avant d'aborder 1'ActionScript 3 en detail, nous allons essayer de comprendre revolu- 
tion qu'a connu ce langage a travers celle du logiciel Flash. 

Historique de Flash et du langage ActionScript 

Flash est bien ne en 1996, comme tout le monde le dit, mais sa creation remonte en fait a 
1993. Cette annee-la, la societe Futurewave (creee par Jonathan Gay, Michelle Welsh et 
Charlie Jackson) publie le logiciel SmartSketch dedie a la creation d' interface graphique. 
A l'epoque il ne s'agit pas encore d'un logiciel d'animation avec une timeline (un scenario) 
et une bibliotheque. Rappelons que le Web en est a ses debuts et que pour creer un site 
Internet, il faut avant tout connaitre le langage HTML et ecrire le code soi-meme ; les 
premiers logiciels WYSIWYG (What You See Is What You Get), tels que Claris Homepage 
ou Dreamweaver, n'existent pas encore. 

II faut attendre 1995 pour que l'application SmartSketch soit dotee d'un systeme de gestion 
d' images sur une echelle temporelle (timeline ou scenario). Elle change egalement de 
nom pour etre rebaptisee FutureSplash Animator, plus connue sous le nom de Future- 
Splash. En decembre 1996, la societe Macromedia (anciennement Macromind jusqu'en 
1992) rachete FutureSplash et le rebaptise Flash : il s'agit de la version 1.0. 

Afin de mieux comprendre les etapes qu'ont traversees le logiciel Flash et son langage 
dedie (ActionScript) au cours de ces 10 dernieres annees, passons en revue les differentes 
evolutions au travers des dates cles de l'histoire du logiciel. 
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Palette, panneau ou fenetre ? 

Nous allons evoquer a plusieurs reprises ces trois differents termes pour designer generalement la meme 
chose, c'est-a-dire une palette (palette Couleurs, palette Aligner, etc.). Rappelons que Macromedia a 
toujours utilise le terme panneau (depuis Flash 5) pour designer une palette. Par convention, tous les 
editeurs de logiciels ont toujours utilise le terme palette, et meme dans les suites CS3, Adobe utilise ce 
terme pour designer les panneaux que nous trouvons encore dans Flash. Dans la version CS4, les 
panneaux seront-ils rebaptises en palettes ? Nous le verrons bien... 



1996 -Flash 1 

La societe Macromedia rachete le logiciel FutureSplash et le rebaptise Flash 1.0. 

1997- Flash 2 

Le logiciel gere les images bitmap et le son stereo. Le symbole de type Bouton fait son 
apparition ainsi qu'une Bibliotheque. Cependant, la gestion des images et des images-cles 
du scenario reste difficile par manque d'ergonomie, meme pour un utilisateur habitue de 
Director, le logiciel phare de l'epoque pour le developpement de produits off-line. 

1998 -Flash 3 

Un systeme d'interactivite est propose. On ne parle pas encore de langage de program- 
mation, mais de gestion des actions. Notons egalement que la timeline (scenario) devient 
plus facile a manipuler. 

1999 -Flash 4 

Cette nouvelle version marque un premier tournant dans l'histoire de Flash. Le langage 
des actions propose de nouvelles fonctions et une meilleure gestion des evenements. 
Linterface est legerement revisitee et l'acces au panneau gerant les differentes actions 
associees a une image ou a une occurrence est plus simple et plus rapide. Flash 4 propose 
une nouvelle barre d'outils, qui commence a ressembler davantage a celle que nous 
connaissons aujourd'hui, et qui contient trois outils dedies au dessin (le trait, l'ellipse et 
le rectangle). II devient egalement possible de se deplacer plus facilement sur la scene 
avec la main et la loupe. La gestion du son utilise le format MP3, mais il n'est toujours 
pas possible de le controler via une action. 

2000 -Flash 5 

Le tournant evoque a propos de la version precedente n'est rien en regard des evolutions 
proposees dans Flash 5 : cette annee-la, Macromedia nous presente un nouveau Flash ! 

Une fenetre intitulee Actions (sur objet ou sur image) apparait pour la premiere fois et 
permet a l'utilisateur de saisir directement du code. II devient possible de beneficier d'une 
aide lors de la redaction de ses propres scripts. 
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Le menu deroulant, dans lequel nous avions jusqu'a present l'habitude de selectionner 
nos differentes commandes pour definir une action, est toujours disponible, mais la saisie 
de lignes d'instructions s'avere bien plus ergonomique ; la productivity est ainsi optimisee. 

Flash 5 connait une refonte complete de son interface en totalisant 21 palettes et change 
d'icone et d'ecran d'accueil (splashscreeri). 

Un nouveau type de symbole est egalement cree : le Smart Clip. II s'agit d'un clip auquel 
sont ajoutees quelques options afin de le transformer en symbole preprogramme : c'est 
l'ancetre du composant. 

2002 - Flash MX 

Macromedia change la numerotation de son logiciel (tous les produits de sa gamme 
adoptent le meme changement). II n'existera done pas de version Flash 6, mais on parle 
tout de meme du player Flash 6 ou lecteur Flash 6. Pour renforcer cette mutation, Macro- 
media uniformise 1' aspect de toutes les icones des ses logiciels ainsi que leurs ecrans 
d'accueil. 

Un nouveau systeme d'agencement des palettes permet un ancrage de celles-ci ; il s'agit 
d'un rangement par alignement avec magnetisme. 

Sans le savoir, mais surement en l'esperant d'un point de vue marketing et technologique, 
Macromedia va faire evoluer partiellement Internet. A cette epoque, Apple, Microsoft 
et Real proposent deja depuis plusieurs annees des solutions de diffusion de flux audio et 
video, mais la possibility d'incorporer une video au format FLV dans une animation 
change la facon de gerer la video sur le Web. En effet, l'interactivite avec ce media devient 
nettement plus facile et sa consultation est paradoxalement plus accessible. Le plug-in 
Flash connait alors en 2002 un taux de penetration tres important. Precisons que le codec 
video utilise est le Sorenson Spark, mais pas encore le On2 VP6. 

Cote programmation, non seulement la fenetre Actions change, mais on peut a present 
parler d'un vrai langage avec une syntaxe pointee. Les composants, qui font leur apparition 
et permettent d'optimiser davantage la productivity du travail dans Flash, facilitent ainsi 
la gestion des elements de formulaires. 

Le choix des lettres M et X avait, en 2002, fait l'objet de nombreuses evocations semio- 
logiques. La plus connue etait celle de maximum represents par MX. L intention premiere 
etait de contracter Multimedia experience en MX. 

2003 - Flash MX 2004 

Le langage ActionScript 2.0, apparu dans cette version, commence enfin a acquerir ses 
lettres de noblesse. Des developpeurs provenant de langages plus traditionnels tels que le C 
ou Java se penchent sur 1' AS (ActionScript) qui propose une approche de programmation 
orientee objet. II devient possible de creer ses propres classes au travers de fichiers externes 
(qui portent 1' extension .as). 
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De nouveaux composants dedies aux medias et aux donnees facilitent et optimisent le 
developpement pour les utilisateurs aguerris. 

Le lecteur Flash evolue vers la version 7. 

2005 -Flash 8 

Du point de vue de la programmation, cette version du logiciel n'aura pas apporte de 
grandes nouveautes. En revanche, pour les utilisateurs au profil de graphiste, nous pouvons 
dire que Flash 8 aura marque un grand tournant dans son histoire en proposant des filtres 
(comme l'avait fait Photoshop 2.5 avec les caiques). 

Nous n'allons pas vous presenter une liste exhaustive de toutes les nouveautes de cette 
version, mais voici celles qui ont change les habitudes de tous les utilisateurs du logiciel : 

• La video fait appel au nouveau codec On2 VP6 qui propose un rapport poids/qualite 
extremement proche du H264. Le composant FLVPlayback facilite davantage encore 
la gestion de ce media dans une animation. 

• Les palettes sont rangees par groupes et des onglets pour y acceder font leur apparition. 

• II devient possible d'appliquer des filtres et des options de surimpression a des occur- 
rences. Cela modifie ainsi les habitudes de production graphique au travers de l'interface 
du logiciel. 

• Le format PNG est enfin gere a partir d'un chargement dynamique execute en 
ActionScript. 

• Une fenetre gere les accelerations et decelerations dans une interpolation. 

• Utilisation de la mise en cache des bitmaps a l'execution. 

2005 - Adobe achete Macromedia 

A la fin de l'annee 2005, pour faire face au geant de l'informatique Microsoft, Adobe 
decide de racheter la societe Macromedia, proprietaire entre autres du standard Flash, 
avec un objectif precis : etendre son monopole de 1' edition. 

Cela fait alors plus de dix ans qu' Adobe est leader sur le marche de la publication papier, 
mais l'entreprise peine a conquerir le marche du Web. Ses tentatives, en 2001, d'imposer 
deux nouveaux logiciels sur le marche de la production online, Live Motion et Golive, 
respectivement des concurrents directs de Flash et Dreamweaver ont echouees. En 
novembre 2003, Adobe decide de ne plus distribuer Live Motion. Quant a Golive, le 
constat est simple : il ne fait partie d'aucune des suites CS3. Sur le site d'Adobe, a ce 
jour, rien n'est notifie quant a un eventuel retrait du marche, la societe invite tout de 
meme les utilisateurs a passer a Dreamweaver. 

En rachetant la societe Macromedia, Adobe a reussi a s'imposer comme leader sur le 
marche du Web et possede aujourd'hui suffisamment de technologies et logiciels pour 
pouvoir tenir tete a Microsoft. 
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Rappel 

Pour information, voici la liste des logiciels/technologies que detient la societe Adobe : Flash, Photoshop, 
Acrobat, Dreamweaver, Premiere, Illustrator, After Effects et InDesign pour ne citer que les principaux. 
Elle possede au total plus de 70 logiciels/technologies. 



2006 - Lecteur Flash 9 

En aout 2005, deux semaines apres la publication de Flash 8, Macromedia annonce la 
sortie du langage ActionScript 3.0 et du lecteur 8.5. II faudra tout de meme attendre la 
sortie de Flash CS3 avant de pouvoir developper avec ce langage (les developpeurs 
Flex utilisaient deja la syntaxe de 1'ActionScript 3 plusieurs mois avant la sortie de la 
version CS3). 

2007 - Flash CS3 

Nouveau grand tournant dans l'histoire de Flash ! Adobe annonce non seulement l'edition 
de la nouvelle version du logiciel, mais egalement l'existence de 5 Creative Suites : 
Design Premium, Design Standard, Master Collection, Production Premium (suite de 
logiciels dedies a la production video), Web Premium et Web Standard. 

Les grands changements qui accompagnent la sortie de Flash CS3 sont les suivants : 

• L' ActionScript 3.0 : nouveau langage de programmation completement oriente objet 
(meme s'il est toujours possible d'adopter une approche de developpement sequentielle). 
Les gestionnaires d'evenements de l'AS3 s'uniformisent par rapport aux versions 
precedentes (l'ASl etl'AS2). 

• Possibility d' importer un document Photoshop (ou bien meme Illustrator et Freehand) 
avec ses caiques. 

• Barre d'outils sur une seule colonne pour un gagner de la place. 

• Les palettes peuvent veritablement etre ancrees sur plate -forme OS X. 

• La palette Proprietes propose le rattachement d'un document ActionScript, qui utilise 
l'extension .as, comme classe du fichier. 

Bien entendu, il ne s'agit pas d'une liste exhaustive, mais uniquement des principales 
nouvelles fonctionnalites qui vont, une fois encore, changer nos habitudes de production. 

10 ans de Flash en images 

Ann de mieux comprendre les propos ci-dessus, voici quelques copies d'ecran des diffe- 
rentes versions du logiciel Flash. Vous noterez que les evolutions se sont souvent produi- 
tes par paliers. Rares sont les nouveautes proposees dans une version, qui n'ont pas ete 
ensuite reprises dans les versions ulterieures. 
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Remarque 

Les copies d'ecran des pages qui vont suivre ont ete realisees a partir de I'ordinateur de I'auteur de cet 
ouvrage, en langant les applications les unes apres les autres. Pour des raisons de droits d'auteurs, 
nous n'avons pas pris la decision de faire figurer des copies d'ecran du logiciel Future Splash Animator 
disponibles sur Google © Image. Vous noterez egalement que les copies des ecrans d'accueil de 
Flash MX 2004 a Flash 8 correspondent a des versions Professional ; il en existe egalement pour les 
versions Basic. 



Les icones 

Traditionnellement, une application est representee par une icone en forme de losange. 
Macromedia decide de ne plus respecter cette convention a partir de Flash MX. Notons 
egalement qu'il n'y a pas de distinction entre les versions Basic et Professional a partir de 
Flash MX 2004. 
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Figure 1-1 

Les icones du logiciel Flash n'ont cesse de changer d 'aspect en 10 ans. 

Les ecrans d'accueil 

On peut observer trois grandes periodes pour les ecrans d'accueil : de 1997 a 2001, le 
meme ecran est utilise pour quatre versions successives du logiciel (Flash 2 a Flash 5). 
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Figure 1-2 

Sur la copie d'ecran du logiciel Flash 3 Beta teste, le numero de version figure en petit a droite du logo 
Macromedia. Sur la version finale, le chiffre 3 figurait a droite du mot Flash, comme pour les versions 4 et 5. 
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Figure 1-3 

Macromedia conserve le meme ecran d' accueil jusqu' a Flash 5. 

A partir de 2002, le fameux / de Flash fait son apparition : on le retrouve notamment sur 
les icones du logiciel et le rouge commence a devenir la couleur de reference pour repre- 
senter ce produit de la gamme. 
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Figure 1-4 

Une nouvelle generation d'ecrans d'accueil apparait a partir de 2002, avec le fameux f symbolisant le logiciel Flash. 

C'est avec le rachat de Macromedia par la societe Adobe que cette derniere decide de redefi- 
nir une identite visuelle pour l'ensemble des produits qu'elle propose au travers de ses diffe- 
rentes suites. Le rouge est conserve, mais le / disparait au profit des deux premieres lettres 
de Flash : Fl. 




Figure 1-5 

Adobe impose une nouvelle identite visuelle ; la paire de lettres Fl represente desormais le logiciel Flash parmi 
tous les produits que la societe possede. 
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Les barres d'outils 



On notera un premier petit changement avec Flash 4, puis une tres grande evolution avec 
Flash 5 (souvenez-vous, nous avons vu que cette version avait marque un vrai tournant 
dans l'histoire du logiciel). A partir de la version MX, la plus grande nouveaute est 
l'arrivee de l'outil Transformation. II faut ensuite attendre Flash CS3, pour decouvrir une 
reorganisation propre a Adobe. 
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Figure 1-6 

// est a noter que la barre d'outils de Flash CS3 est egalement configurable sur deux colonnes. 

Le scenario (timeline) 

Le principal defaut que nous pouvions reprocher a Flash 2 etait son manque de souplesse 
dans la manipulation du scenario. Depuis la premiere version, les notions d'images et 
d'images-cles ont toujours existe, mais la manipulation des cellules du scenario a ete 
simplifiee uniquement a partir de Flash 3. 
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Figure 1-7 

Scenarios de Flash 2 et 3. Des versions minimalistes et presque fonctionnelles ! 
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Comme nous l'avons evoque au debut de ce chapitre, c'est a partir de Flash 5, en 2000, 
que nous avons connu un reel changement, notamment au niveau de 1'ActionScript. 

Cependant, comparez bien les figures 1-7 et 1-8 : vous pouvez constater que c'est un an 
plus tot, en 1999 avec Flash 4, qu'une nouvelle structure de la palette Scenario donne le ton 
pour toutes les versions a venir. Macromedia avait reserve en 1999 des locaux majestueux a 
Disneyland Paris pour convoquer toute la presse a un petit dejeuner et une presentation 
du produit. II est important de rappeler qu'a l'epoque, Flash n'etait pas encore un logiciel 
tres connu. 
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Figure 1-8 

Scenarios de Flash 4 et 5 



II aura fallu attendre l'annee 2002 pour voir apparaitre l'icone d'un dossier jaune en has 
a gauche de la fenetre Scenario. A partir de cette date, il devient enfin possible d'organiser 
ses caiques en les regroupant comme nous pouvions deja le faire depuis plusieurs annees 
dans des logiciels comme Photoshop ou Illustrator. Cette nouveaute va radicalement 
changer les habitudes de production au quotidien. 
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Figure 1-9 

Scenarios de Flash MX et MX 2004 
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Figure 1-10 

Scenario de Flash 8 
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Figure 1-11 

Scenario de Flash CS3 



En conclusion, si vous observez attentivement les copies d'ecran des figures 1-7 a 1-10, 
vous constaterez qu'a partir de Flash 4 les fonctionnalites de cette palette n'ont pas 
change. C'est uniquement l'apparence graphique de chaque nouvelle version qui possede 
plus ou moins son propre style. 

La palette Proprietes 

La palette Proprietes est celle qui a connu le plus grand nombre de transformations au fil 
du temps. En effet, dans Flash 2, on ne parlait pas vraiment de panneau et a peine de 
proprietes. II s'agissait d'une fenetre ou il etait possible d'effectuer quelques reglages. 
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Figure 1-12 

Palettes Proprietes de Flash 2, 3 et 4 



La grande revolution aura ete l'arrivee de palettes pour gerer les parametres des differentes 
composantes d'une animation. II devient non seulement possible d'acceder rapidement 
aux options de reglage des differentes proprietes de 1' animation, des clips, des textes... 
mais nous disposons egalement d'une plus grande precision d'ajustement des parametres. 
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Macromedia adopte ce systeme de palettes bien connu des autres editeurs de logiciels, 
mais la societe n'a pas encore insere la fameuse barre horizontale tres ergonomique 
qu'on va decouvrir a partir de Flash MX (figure 1-14). 
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Figure 1-13 

Palette Proprietes de Flash 5 
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Figure 1-14 

Palette Proprietes de Flash MX 
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Les versions MX et MX 2004 presentent tres peu de changements au niveau de l'inter- 
face du logiciel. II s'agit de deux versions tres proches, ou meme l'icone du logiciel reste 
identique. Rappelons que seul le langage ActionScript subit un profond changement en 
evoluant vers la version 2.0. 
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Figure 1-15 

Palette Proprietes de Flash MX 2004 
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A partir de Flash 8, l'insertion d'onglets dans les groupes de panneaux permet un acces 
et un affichage plus rapides des palettes. Notons egalement l'ajout d'une option de mise 
en cache des bitmaps a P execution. 
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Palette Proprietes (d'un clip) de Flash 8 
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Figure 1-17 

Palette Proprietes (du document) de Flash 8 
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Figure 1-18 

Palette Proprietes {du document) de Flash CS3 



La Bibliotheque 

L'apparence de la Bibliotheque a globalement subi peu de modifications. Seuls les 
boutons de selection d' affichage des types de symboles disponibles dans les versions 2, 3 
et 4 de Flash ont disparu dans les versions suivantes pour laisser tres rapidement la place 
a un classement par noms ou types. 

A partir de Flash 5, Parrivee des dossiers a permis d'augmenter la productivity du travail 
en rendant enfin possible le classement des symboles (fig. 1-19). 

A partir de Flash 8, un menu deroulant est propose dans la palette afin de pouvoir afficher 
la bibliotheque d'une autre animation (fig. 1-20). 
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Figure 1-19 

Lei bibliotheques de Flash des versions 2, 3,4 et 5 
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Figure 1-20 

Lej bibliotheques de Flash des versions MX, MX 2004, 8 et CS3 



Globalement, la bibliofheque a toujours conserve les memes fonctionnalites : regrouper 
sous forme de liste 1' ensemble des symboles disponibles dans une animation et previsualiser 
ces derniers dans une vignette situee dans la partie superieure de la palette. 



Les actions 

L' evolution de la gestion de 1' ActionScript au travers des interfaces des differentes versions 
de Flash est particulierement interessante. Les premieres versions du logiciel ne compor- 
taient pas reellement de langage de programmation. II s'agissait plutot d'un systeme de 
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gestion de scripts associes a un bouton ou a une image -cle. L'ajout d'une action, c'est 
ainsi que nous parlions de programmation, permettait d'apporter de l'interactivite a une 
animation au moyen de termes, assimilables aux instructions d'un langage, peu 
nombreux et accessibles seulement a partir de sous-fenetres. L' interface de Flash etait en 
fait peu adaptee a cette activite. 
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Figure 1-21 

Systeme de gestion des scripts dans Flash 2 et 3 



La version Flash 4 a ete dotee d'une serie importante de termes supplementaires. C'est a 
partir de cette version que nous avons pu utiliser des variables, regler dynamiquement les 
proprietes d'une occurrence, mener des tests, ecrire des iterations ou encore charger des 
images externes. 

La gestion des evenements a egalement ete introduite dans Flash 4. Aujourd'hui, avec du 
recul, nous pouvons considerer que cette version du logiciel aura ete la premiere a proposer 
un reel systeme de programmation. 
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Figure 1-22 

Systeme de gestion des scripts dans Flash 4 
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Flash 5 offre enfin la possibility aux utilisateurs de programmer leurs propres scripts (on 
ne parle pas encore de developpement Flash). Une fenetre est dediee a cette gestion de 
1' interactivity et le langage ActionScript 1 nait vraiment en 2000. Ce dernier comporte 
meme des classes natives pour gerer le son, la date, la couleur, etc. Une aide a la saisie de 
script continue d'exister, comme dans les version precedentes, mais avec une meilleure 
ergonomie. 

Quelques mois apres la sortie de Flash 5, on commence a trouver de plus en plus de sites 
Internet dedies a cette technologie, qui n'est pas encore qualifiee ainsi a l'epoque. Rappe- 
lons que, pendant de nombreuses annees, 1' ActionScript a ete boude par la communaute 
des developpeurs a cause de son manque de standardisation par rapport a d'autres langages 
types tels que Java ou C. 

Les scripts sont places sur les occurrences de clip et de bouton ainsi que sur les images-cles. 
L' expansion que connait 1' ActionScript a cette epoque est importante : la communaute 
des developpeurs Flash commence a peine a se construire et se structurer, le langage de 
programmation se complexifie tres rapidement, il est enfin possible d'ecrire de reelles 
applications interactives sur Internet, les premiers sites extraordinaires, au sens etymo- 
logique du terme, commencent a etre connus... L' ActionScript 1 va ainsi vraiment faire sortir 
Flash de l'ombre et le plug-in Flash commence peu a peu a s'imposer. 
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Figure 1-23 

Fenetre Actions de Flash 5 



En 2002, Flash MX est dotee d'une nouvelle interface, mais le langage est pousse dans 
ses derniers retranchements. La communaute des developpeurs Flash essaye de trouver 
des solutions pour pallier ses limites, malgre l'ajout de nouvelles classes. 



Figure 1-24 

Fenetre Actions de Flash MX 
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La version Flash MX 2004 s'accompagne d'une nouvelle version du langage : 
P ActionScript 2. Les limites rencontrees dans Flash MX sont enfin repoussees car il est a 
present possible de creer ses propres classes dans des fichiers externes. 
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Figure 1-25 

Fenetre Actions de Flash MX 2004 

Comme nous Pavons vu precedemment, Flash 8 aura ete la version des graphistes. En 
effet, toutes les nouveautes de cette version auront ete relatives aux attentes des creatifs, 
avec tres peu de changements pour les developpeurs. 

En revanche, Flash CS3 (Flash 9) propose enfin PActionScript 3, la version annoncee 
pres d'un an auparavant et done tres attendue. 
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Figure 1-26 

Fenetres Actions des versions Flash 8 et CS3 
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ActionScript 3 - Programmation sequentielle et orientee objet 



Aujourd'hui, 1'ActionScript 3 est un vrai langage orients objet comparables aux langages 
de reference. 



Conclusion 

Qui aurait pu imaginer tout le chemin parcouru par un si petit logiciel ? Finalement, 
comme nous l'evoquions au cours de cette presentation, Flash aura mis du temps a acquerir 
ses lettres de noblesse. Encore aujourd'hui, avec la percee d'Ajax, certains detracteurs 
pensent que Flash ne sortira pas indemne du combat debute il y a environ un an. Pour 
information et rappel, Ajax est une solution de developpement qui utilise plusieurs 
technologies/standards, alors que Flash n'en represente qu'une et gere parfaitement et 
simplement la video et le son. Ajax et Flash ne sont pas des solutions de developpements 
concurrentes, mais complementaires. La qualite d'un developpement depend toujours 
des competences du developpeur ! 

Precisons que Flash possede une mauvaise reputation aupres d'un certain public. Ceci est 
du au fait que, parmi les nombreux developpements assures en Flash, tous ne sont pas 
realises par des specialistes de l'AS3 ou de l'AS2. Avec la derniere version de 1'Action- 
Script 3 et l'engouement d'une tranche de la population des developpeurs d'origine Java 
ou C, le langage Flash devrait enfin connaitre un reel succes. A titre de comparaison, et 
sachant que l'AS3 est proche a plus de 90 % du langage de Flex, on notera que Flex a 
deja commence a s'imposer aupres des developpeurs chevronnes. 

Au travers de cette retrospective, nous n'avons pas evoque les differentes dates de crea- 
tion des logiciels ou technologies tels que Generator, Flash Media Server (anciennement 
Flash Communication Server), Flash Remote, FlashPaper, FlashLite, Flex et Appolo car 
nous nous serions ecartes de notre propos initial, l'histoire exclusive de Flash. 

Les deux modes de programmation 

Comme nous l'avons evoque au cours des premieres pages de l'avant-propos de ce livre, 
il existe deux modes de programmation. Puisque 1' ActionScript 3 peut s'adapter a ces 
deux approches, il est naturel de s'interroger sur le mode a utiliser. 

II est tres difficile, voire impossible de conseiller a un individu l'un des deux modes tant 
qu'on ne connait pas son experience personnelle et professionnelle dans le domaine de 
l'informatique en general, et dans celui de la programmation en particulier. Ainsi, il 
serait absurde de conseiller la programmation sequentielle a un adolescent, sous pretexte 
qu'il n'a jamais programme auparavant ou qu'il est trop jeune. Cela n'aurait pas de sens 
non plus de preconiser une approche orientee objet a un developpeur Web, sous pretexte 
qu'il utilise du XHTML et des CSS depuis de nombreuses annees pour concevoir des 
sites Internet. Tout depend des aptitudes de chacun a ecrire dans un langage different de 
son langage habituel. 
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Le seul conseil raisonnable que nous pouvons vous donner est de commencer a appren- 
dre les deux modes en vous appuyant sur les premieres pages de ce livre ; par la suite, 
vous choisirez tout naturellement celui qui vous semblera le plus logique. Quoi qu'il en 
soit, le mode de programmation sequentiel est plus facile a prendre en main car son utili- 
sation est moins contraignante. Cependant, si vous etes amene a utiliser 1' ActionScript de 
facon intensive dans les mois et/ou annees a venir, vous n'avez pas le choix : adoptez le 
mode de programmation orientee objet. 



Conseil 

En tant qu'enseignant et developpeur Flash, je preconise de bien connaitre les deux modes de program- 
mation car ils donnent lieu a deux types de production. Lorsque vous aurez besoin de realiser une simple 
animation avec une legere interactivite, il sera inutile de creer et de faire appel a une classe document. En 
revanche, lorsque vous devrez realiser un projet assez important, nous ne saurions vous conseiller autre 
chose que la programmation orientee objet. 



Si vous ne parvenez pas a maitriser la programmation orientee objet apres quelques 
tentatives infructueuses, optez alors pour la programmation sequentielle. II sera toujours 
possible, meme apres plusieurs mois de pratique, de basculer finalement vers la program- 
mation orientee objet. 

Quelle que soit l'approche que vous choisissez, gardez toujours a 1' esprit que vous devez 
longuement reflechir a la fois aux objectifs que vous souhaitez atteindre a travers votre 
programmation, mais egalement aux fonctionnalites que doit posseder votre animation. 
Sachez que la programmation est un metier qui s'appuie sur des regies, normes, techniques 
et conventions. 

Les deux developpements ci-apres ont pour objectif d'expliquer les specificites de 
chaque mode. 



La programmation sequentielle ou structuree 

Avant de commencer a saisir son premier script... 

Pour ajouter de 1' interactivite a un bouton, ici une simple reaction au clic de souris, nous 
allons faire appel aux fenetres Scenario et Actions. Commencez tout d'abord par organiser 
votre espace de travail afin de disposer de suffisamment de place dans la fenetre Actions. 
La copie d'ecran de la figure 1-27 vous montre un exemple de configuration de l'environ- 
nement de travail. 
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Figure 1-27 

Donnez une place suffisamment grande a lafenetre Actions afin de pouvoir saisir confortablement votre code 
ActionScript. 

Nous conseillons de conserver presentes a l'ecran les palettes Sortie et Erreurs de compi- 
lation afin de ne pas destructurer la configuration de votre espace de travail. Par ailleurs, 
n'oubliez pas qu'un clic sur la barre de titres, dans laquelle se trouvent les onglets des 
palettes, permet d'afficher ou de masquer une palette comme le montre la figure 1-28. 
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Figure 1-28 

Pour masquer ou afficher un ensemble de palettes, un simple clic sur la barre de titres sujfit. 



Lorsque vous aurez termine de configurer votre espace de travail, nous vous conseillons 
de memoriser cette disposition de la facon suivante : 

1 . Dans le menu Fenetre et dans le sous-menu Espace de travail selectionnez la commande 
Enregistrer la presentation active. . . 
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Astuce 

Un double-clic sur I'outil de la main (dans la barre d'outils) permet de regler la taille d'affichage de la scene 
de fagon a la rendre integralement visible dans I'espace disponible entre la fenetre Actions et la barre 
d'outils. Un double-clic sur I'outil de la loupe (dans la barre d'outils) permet de regler rapidement la taille 
d'affichage de la scene a 100 %, c'est-a-dire a I'echelle 1 :1 de votre animation a I'ecran. 



2. Specifiez un nom de configuration que vous pourrez alors retrouver en selectionnant 
la commande eponyme dans le menu Fenetre, commande Espace de travail. 

Dans la copie d'ecran de la figure 1-27, vous constaterez que nous n'avons pas affiche 
la fenetre Bibliotheque pour gagner un peu de place dans l'interface. Un simple 
Commande -L (Mac) ou Ctrl-L (Windows) permet d'afncher rapidement la Bibliotheque 
de l'animation. Si vous souhaitez la conserver afhchee a I'ecran, ancrez-la a l'un des 
deux groupes de panneaux situes en bas a droite de I'ecran. 



Ancrer une palette 

L'ancrage (le terme anglais est to dock) d'une palette est tres simple : il suffit de la saisir en cliquant sur 
son onglet, puis de la faire glisser sur un groupe d'autres palettes (figure 1-29). 
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Figure 1-29 

Avec Flash CS3, il redevient enfin possible de gerer le regroupement des palettes par un simple glisser-depacer. 

Par ailleurs, pour editer rapidement un symbole, vous n'etes pas oblige de passer par la 
fenetre Bibliotheque : il est en effet utile de memoriser que le bouton situe en haut a droite 
de la fenetre contenant la scene (figure 1-30), permet un acces rapide aux symboles de 
l'animation en cours. 



j ■" ■ _i s 



ill |t * ti * H i 5°-° jp» o.°« E3 



^ Sequence 1 



Espace de travail ▼ 




Figure 1-30 

Le bouton situe en haut a droite de la fenetre contenant la scene permet un acces rapide aux symboles 
de l'animation en cours. 
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Saisir son premier script 

Voyons a present comment proceder pour ecrire un premier script dans une animation 
Flash. Pour cet exemple, precisons simplement que nous avons nomme boutonAlert une 
occurrence de symbole de type clip. Cette derniere sera utilisee dans le deuxieme exemple. 



Nommer une occurrence 

Commencez par cliquer sur une occurrence de la scene puis, dans la palette Proprietes, cliquez dans la 
case de saisie qui contient le texte temporaire <Nom de 1 'occurrenceX Saisissez alors le nom 
d'instance (ou occurrence) que vous souhaitez ; il ne doit contenir aucun caractere accentue ou special ni 
le caractere espace. 
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Figure 1-31 

Vous ne pouvez programmer une occurrence que si vous Vavez nommee. 
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Figure 1-32 

Un die sur ce bouton permet de quitter lafenetre d' edition d'un symbole. 



Edition involontaire d'un symbole 

Certaines personnes ont parfois le reflexe de double-cliquer pour selectionner une occurrence au lieu 
d'effectuer un simple die. Cette action vous place alors dans la fenetre d'edition du symbole. Pour en 
sortir, il suffit d'effectuer un simple die sur le bouton qui se trouve en haut a gauche de la fenetre qui 
contient la scene (figure 1-32). Le raccourci-clavier Commande-E (Mac) ou Ctrl-E (Windows) permet 
egalement de revenir sur la scene. 



Premier exemple 

1. Cliquez sur une image-cle du scenario (figure 1-33). 

2. Cliquez dans la fenetre Actions (figure 1-33). 

3. Saisissez votre script. 
Exemple de script : 

IStopO; 
trace( "Bonjour tout le monde !"); 
traceC'Ceci est un premier exemple"); 
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Attention : si vous cliquez directement dans la fenetre Actions sans avoir selectionne une 
image-cle, il est fort probable que vous saisissiez un script alors qu'une occurrence est 
encore selectionnee. Vous allez, dans ce cas, generer une erreur. 
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Figure 1-33 

Commencez par cliquer sur une image-cle du scenario, puis dans la fenetre Actions avant de saisir voire script. 



Conseil 

II est astucieux de creer un caique nomme, par exemple, Actions ou Scripts et de dedier ses images-cles 
a la saisie du ou des scripts de I'animation. 



Lorsque cette procedure en trois points est terminee, vous devez lire I'animation pour 
verifier la validite du code. A l'aide du raccourci clavier Commande-Entree (Mac) ou 
Ctrl-Entree (Windows), une fenetre d' execution du code apparait. 

Notre premier script est tres simple : il consiste, tout d'abord, a bloquer la tete de lecture afin 
qu'elle n'aille pas plus loin dans le scenario (ce qui n'est pas necessaire si I'animation ne 
comporte qu'une seule image, comme dans notre exemple). Ensuite, nous avons provoque 
l'affichage, dans la fenetre Sortie, de deux messages : ils sont places entre guillemets et 
entre parentheses. 

Deuxieme exemple 

A present, imaginons que nous souhaitions afficher ces deux messages lors d'un clic sur 
une occurrence de la scene. 



Attention 

Avant de poursuivre votre lecture, veillez a creer un symbole de type clip et a nommer I'occurrence obtenue, 
comme nous I'avons fait au debut de ce developpement. 



II suffit alors de remplacer le code precedent par celui ci-apres : 

function afficherMessage(evt:MouseEvent) { 

traceC'Bonjour tout le monde !"); 

traceC'Ceci est un premier exemple"); 
} 
bouton Al ert. add Event Li stener(MouseEvent.CLICK,afficherMes sage) ; 

Ainsi, les deux messages ne sont plus affiches au lancement de I'animation, et nous 
controlons a present l'instant de leur apparition. 
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Sans autre explication, il est normal que ce script vous semble complexe. Vous trouverez 
au chapitre 3 de tres nombreuses pages consacrees au fonctionnement des gestionnaires. 
Dans ce deuxieme exemple, nous avons simplement cherche a vous demontrer rimportance 
de la place d'un script dans une animation Flash en mode de programmation sequentielle. 



Qu'est-ce qu'une fonction ? 

II s'agit d'une notion elementaire en programmation qui consiste a ecrire plusieurs lignes constructions 
entre des accolades, ensemble d'operations associe a un terme (en fait, le nom de la fonction) que vous 
devez definir. Lorsque vous avez besoin d'executer les lignes de code contenues dans une fonction, vous 
faites alors simplement reference a son nom. 



ATTENTION : note aux neophytes en matiere de programmation 

Si cette premiere explication de I'ActionScript vous semble trap abstraite, ne terminez pas la lecture de ce 
chapitre et passez directement au troisieme. 



La programmation orientee objet 

La programmation orientee objet constitue un mode et un modele de developpement tres 
particulier. Dans les lignes qui vont suivre, nous n'allons pas vous expliquer les bases 
fondamentales de la POO (Programmation orientee objet) qui necessiteraient un deve- 
loppement de plusieurs dizaines de pages, mais plutot vous en presenter une approche a 
travers I'ActionScript 3. Afin que nos explications puissent etre comprises de tous, nous 
allons commencer par exposer la structure d'un package a l'aide d'un exemple precis. 
Dans la suite de cet ouvrage, nous decouvrirons progressivement differents exemples ou 
nous expliquerons alors certaines notions dans leurs contextes. 

Avant de commencer a saisir son premier script... 

Si vous ne connaissez pas encore I'ActionScript, nous vous conseillons d'utiliser l'interface 
de Flash pour ecrire vos premiers scripts. En revanche, si vous etes deja familier avec un 
autre environnement de developpement integre (IDE) qui supporte 1' AS3, n'hesitez pas a 
le conserver. D'une facon generate, si vos activites vous conduisent a passer de nombreuses 
heures par semaine a developper en AS3, nous pouvons vous conseiller d'utiliser 1'IDE 
FlashDevelop. Si vous etes un utilisateur d'Eclipse, telechargez le plug-in qui vous 
permettra de developper dans cet environnement. 



Definition 

Un IDE est un environnement de developpement integre (Integrated Development Environment) qui 
propose a I'utilisateur un editeur de code, des outils automatiques de fabrication, un compilateur servant a 
transformer le ou les fichiers source en un code executable et, enfin, un debogueur. Flash est done un IDE 
qui possede egalement une GUI (Graphical User Interface) qui constitue l'interface graphique de I'outil de 
developpement. 
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La classe document 

Si vous avez lu les explications relatives a 1' emplacement d'un script en programmation 
sequentielle, vous avez pu constater que le code est associe a une image-cle a partir de la 
fenetre de scenario. 

En adoptant une approche de developpement orientee objet, 1' image-cle ne constitue plus 
1' emplacement privilegie pour coder une animation : nous allons alors utiliser des tichiers 
externes. Pour debuter, nous devons creer un document de la facon suivante : 

1. A partir de Flash, creez un nouveau document de type Fichier Flash (AS 3.0), arm 
que nous puissions realiser les differentes parties de notre interface (figure 1-34). 



Type : 




fl Fichier Flash (AS 3.0) fe 
IS Fichier Flash (AS 2.0) 
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Figure 1-34 



Differents types de nouveaux documents peuvent etre crees. Les types Fichier Flash (AS 3.0) et Fichier 
ActionScript sont necessaires en programmation orientee objet. 



Remarque 

Lorsque vous aurez davantage de facilit.es a programmer en AS3, ce premier document ne vous servira 
peut-etre plus. Vous preparerez alors les differentes parties de votre interface dynamiquement a partir du 
langage ActionScript. 



2. Dans le menu Fichier, activez la commande Enregistrer sous. . . 

3. Donnez un nom de fichier comme Exempl el . f 1 a. 

Votre document principal est maintenant termine. D'apres ce que nous disions au 
debut de cette section, nous devrions a present disposer sur la scene les differents 
symboles de la bibliotheque pour construire notre interface et ainsi donner forme a 
notre animation. Dans un souci de simplicite, nous n'allons rien placer sur la scene 
dans ce premier exemple. 

4. Creez a nouveau un document en selectionnant cette fois-ci le type Fichier ActionScript. 

5. Dans le menu Fichier, activez la commande Enregistrer sous. . . 

6. Attention, le nom que vous allez a present donner au fichier est important. Rappelons 
qu'il ne doit pas contenir de caracteres speciaux ou accentues, ni meme d'espace. Par 
exemple, AfficherMessage.as est un nom valide. 
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A partir de ce moment-la, vous devez posseder deux documents ouverts dans TIDE 
de Flash, comme le montre la figure 1-35. Vous noterez que, par defaut, le fichier FLA 
est associe a notre document de type ActionScript. II figure dans le menu deroulant 
situe en haut a droite de la fenetre de code. 
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Figure 1-35 

L' interface de Flash contient deux onglets, en haut a gauche de votre ecran. 

7. Revenez sur le document Exempl el . f 1 a en cliquant sur l'onglet eponyme. 

8. Dans la palette Proprietes, saisissez le mot Af f i cherMessage a l'emplacement du para- 
metre Classe du document (figure 1-36). 
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Figure 1-36 

Specifiez le nom du document ActionScript qui contient la classe du document. 

II ne nous reste plus a present qu'a rediger le script lui-meme, c'est-a-dire le contenu du 
fichier Affi cherMessage. as. 



Creer son premier package 

Tout d'abord, vous devez comprendre que les lignes d' instructions que nous nous appre- 
tons a saisir font appel a des regies de programmation tres precises. Chaque terme a une 
signification et joue un role tres important dans le fonctionnement du programme. A la fin 
de ce chapitre, nous developperons la notion de di spl ay Li st. II est indispensable que vous 
reussissiez a visualiser mentalement les organigrammes qui y sont proposes. Vous pour- 
rez ainsi appuyer vos developpements sur la hierarchie des classes de 1' ActionScript 3 et 
sur le systeme de gestion d'affichage des composants d'une interface (instances visibles 
sur la scene). 

Exemple 

Nous allons creer un fichier ActionScript dont le role est d'afficher un message de type 
texte dans la fenetre Sortie de Flash ou sur la scene. 
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1. Cliquez dans la fenetre principale (en haut a gauche) du document AfficherMessage.as, 
comme vous le feriez lorsque vous vous appretez a saisir un texte dans un logiciel de 
traitement de texte. 

2. Saisissez le texte suivant : 

I package { 
> 

De cette facon, vous definissez un package, c'est-a-dire un ensemble de lignes d'instruc- 
tions regroupees en classes et autres fonctions. L'avantage de cette organisation est de 
pouvoir reutiliser ce code dans d'autres programmes ou animations. Vous rencontrerez 
parfois d'autres syntaxes qui emploient un autre mot apres le terme package : il s'agit 
d'une hierarchisation de l'organisation des differents packages. 

3. A l'interieur des accolades, vous creez une premiere classe comme ceci : 

I public class AfficherMessage extends Sprite { 
> 
Notez que les regies de nommage d'une classe sont les memes que pour les noms de 
fichiers. Veillez egalement a ecrire le terme class avec une minuscule en debut de mot et 
sans e a la fin. 

La classe AfficherMessage ainsi creee est une extension de la classe Sprite, c'est-a-dire, 
en quelque sorte, la duplication d'une classe existante. Cette nouvelle classe possede les 
memes fonctionnalites de base que celle dont elle est l'extension, c'est-a-dire qu'elle 
herite des evenements, methodes et proprietes de la classe Sprite. On parle alors de 
notion d'heritage. 

Afin que le compilateur de Flash reconnaisse tous les termes relatifs a la classe Spri te, lors- 
que nous y ferons reference, nous devons lui ordonner d'executer l'instruction ci-dessous : 

import flash. display .Sprite; 



Compilateur 

Lorsque vous travaillez dans Flash, il est necessaire, a certains moments, de visualiser le resultat de votre 
production. Pour ce faire, a I'aide du raccourci clavier Commande-Entree (Mac) ou Ctrl-Entree (Windows), 
vous pouvez obtenir un fichier au format SWF qui est directement lu dans llntertace de Flash. II est egalement 
possible de lire ce fichier dans le lecteur Flash (Flash Player) fourni avec I'environnement auteur de Flash 
(dans le sous-dossier PI ayers du dossier Flash CS3). 

Comment est genere ce fichier SWF que vous utiliserez comme source dans une page Web ou que vous 
transformerez en projecteur ? C'est justement le role du compilateur qui est done un programme integre a 
Flash. Au moment de la publication d'une animation, le compilateur de Flash lit les lignes d'instructions de 
votre animation afin de les interpreter pour generer le fichier au format SWF. 
Lorsque le compilateur parcourt les differentes lignes d'instructions de votre fichier ActionScript, il reagira 
a la directive import en recherchant le contenu du fichier indique en parametres. II s'agit de lignes 
d'instructions en ActionScript. 
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Vous devriez obtenir pour 1' instant le code suivant : 

package { 

import flash. display. Sprite; 

public class AfficherMessage extends Sprite { 

} 
} 



Definition simplifies d'une classe 

Une classe est un ensemble de lignes d'instructions organisees en fonctions suivant leurs roles. Chaque 
fonction contient, a son tour, un ensemble de lignes d'instructions. 



Vous noterez l'ajout du mot publ i c devant le terme class, par opposition a pri vate. Nous 
reviendrons plus tard sur le role de ce mot-cle (attribut). 

4. Nous devons maintenant definir le contenu de la classe, qui peut varier considerable- 
ment d'un programme a un autre. Cependant, une classe a generalement toujours la 
meme structure. Elle contient un constructeur, aussi appele fonction constructrice, et 
d'autres fonctions qualifiees de methodes. Nous reviendrons sur ces notions un peu 
plus loin dans ce chapitre. Pour 1' instant, ajoutez simplement tracer Bon jour"); a 
l'interieur de votre classe, comme ceci : 

package { 

import flash. display. Sprite; 

public class AfficherMessage extends Sprite { 
traceC'Bonjour") ; 

} 
} 



Attention a I'enregistrement de votre fichier ActionScript... 

Vous devez systematiquement enregistrer votre fichier ActionScript apres chaque changement de votre 
code. Dans le cas contraire, vous ne verriez pas les modifications s'executer lors de la publication de votre 
animation, c'est-a-dire au moment de la compilation de votre code. 



Le constructeur 

Dans ce premier exemple, nous provoquons simplement l'affichage de l'expression Bonjour 
dans la fenetre Sortie de Flash, mais nous n'avons pas encore obtenu un code tres conven- 
tionnel. En effet, de la meme facon qu'un code est execute au passage de la tete de lecture sur 
une image-cle, nous devons creer un constructeur dans notre classe AfficherMessageO, 
c'est-a-dire une fonction dont le code sera execute au chargement de la classe ou du package. 

Rappelons que, puisque nous avons indique le nom du fichier de la classe document dans 
la palette Proprietes (figure 1-36), un package sera charge au lancement de 1' animation. 
Voici le code que vous devez a present ajouter a votre classe. 

I public function AfficherMessageO ( 
traceC'Bonjour" ) ; 
} 
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II s'agit du constructeur, qui doit porter le meme nom que celui de la classe et done du 
nchier ActionScript. La presence du constructeur n'est pas obligatoire, mais elle permet 
d'initialiser certains parametres ou certaines actions lors de l'appel de la classe, e'est-a- 
dire au chargement de 1' animation (rappelons que nous travaillons sur une classe du 
document). Voici le code global que vous devriez a present obtenir : 

package { 

import fl ash. display. Sprite; 
public class AfficherMessage extends Sprite ( 
public function AfficherMessage( ) { 
traceC'Bonjour") ; 



Vous noterez la presence du mot cle publ ic qui n'a pas d' importance dans la declaration 
du constructeur, dans la mesure ou ce dernier est par defaut toujours de type publ i c. 

Les methodes de classe 

Nous allons a present creer une autre fonction, non pas en remplacement du constructeur, 
mais en supplement. Examinez la fonction suivante : 

package { 

import fl ash. display. Sprite; 
public class AfficherMessage extends Sprite { 
public function AfficherMessage( ) { 

traceC'Bonjour") ; 
} 

private function afficherHeure( ) { 
traceC'Bonjour, il est 6 h 3 1 " ) ; 



Cette fonction, qui est habituellement appelee une methode de la classe, joue un role tres 
important car elle permet de definir une action a partir d'une etiquette. Pour appeler cette 
methode, et done executer le code correspondant, il suffit d'ecrire dans le code le nom de 
la fonction (son etiquette) suivie de parentheses, ici aff icherHeure( ), comme dans l'exemple 
suivant : 

package { 

import fl ash. display. Sprite; 
public class AfficherMessage extends Sprite { 
public function AfficherMessage( ) { 

afficherHeure( ) ; 
} 

private function afficherHeure( ) { 
traceC'Bonjour, il est 6 h 3 1 " ) ; 
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Nous avons remplace la seule ligne d' instruction contenue dans le constructeur par un 
appel de la methode afficherHeure. Cette derniere peut etre appelee a tout moment, 
uniquement a partir de la classe. 



Remarque 

Pour afficher correctement I'heure sur la scene au chargement de I'animation, il faudrait ajouter un texte 
dynamique sur la scene (nom d'instance : zoneAffichage) et remplacer la ligne d'instruction 
traceCBonjour, il est 6h31") ; par les lignes suivantes : 

var instantTemps :Date = new DateO; 
var heures: Number = instantTemps .getHours( ) ; 
var minutes:Number = instantTemps. getMinutes( ) ; 
zoneAffichage. text = "II est "+heures+"h"+minutes ; 

Lajout d'un texte dynamique sur la scene necessite d'inserer la ligne ci-apres a la suite du premier import 
de classe : 

import fl ash. text. TextField; 



private ou public ? 

Dans notre exemple, nous ne definissons qu'une seule classe. Nous pourrions etre 
amenes a en gerer plusieurs et, de ce fait, a utiliser, pour certaines methodes et proprietes, 
des noms identiques. Ann que ces methodes et proprietes ne soient accessibles que dans 
la classe ou elles ont ete declarees, nous employons le specificateur de controle d'acces 

private. 

C'est precisement le cas dans notre script, ou nous souhaitons que la fonction (la 
methode) afficherHeureO de la classe AfficherMessage ne puisse etre appelee qu'a partir 
de cette derniere et non pas d'une autre classe. Nous specifions done que la methode est 
de type private. 

En revanche, si nous souhaitions qu'une methode declaree dans une classe puisse etre 
accessible a partir d'une autre, nous utiliserions le specificateur de controle d'acces 
publ 1c. 

Le fait qu'une methode soit de type publ 1 c ou pri vate permet done de definir sa portee, 
mais autorise egalement la reutilisation d'un nom identique dans d'autres classes pour 
definir de nouvelles methodes aux fonctionnalites differentes. 



Portee d'une fonction ou d'une variable 

Nous entendons par portee d'une methode, I'etendue et la disponibilite du code contenu dans la fonction 
(la methode). Certains developpements vous conduiront a creer plusieurs classes. Si vous souhaitez limi- 
ter Taction d'une methode a une seule classe, vous allez en fait limiter la disponibilite de la methode a 
cette classe, et done restreindre sa portee. Le terme portee inclut une notion de propagation du code. 



Consultez le chapitre 7 dedie aux variables pour des explications supplementaires sur les 
mots-cles pri vate et publ i c. 
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Le chemin de classe 

Dans l'exemple que nous venons d'aborder, nous n'avons eu a gerer qu'un seul fichier. 
Dans les projets plus lourds, vous devrez manipuler plusieurs fichiers ActionScript. II 
deviendra alors necessaire de les ranger dans des dossiers pour les organiser. Dans ce cas, 
avant de pouvoir importer vos classes, vous devrez specifier a Flash, et plus precisement 
au compilateur, l'emplacement du ou des dossiers qui contiennent les fichiers ActionScript. 

Pour cela, selectionnez, dans le menu Fichier de Flash, la commande Parametres de 
Publication. Cliquez sur l'onglet Flash (situe en haut de la fenetre) et cliquez sur le bouton 
Parametres (voir figure 1-37). Dans la fenetre qui apparait, vous devez alors specifier le 
chemin des classes a gerer pour votre projet en cliquant sur le bouton contenant une cible. 



Remarque 

Vous noterez que la classe du document peut egalement etre definie a cet endroit-la. 
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Figure 1-37 

Specifiez le chemin de classe afin que le compilateur de Flash sache oil trouver les classes que vous lui demandez 
d' importer. 
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Les imports de classes et packages 

Lorsque vous programmez directement dans la fenetre Actions de l'interface de Flash, 
vous ne vous souciez pas d'un detail qui joue pourtant un role capital en mode de 
programmation orientee objet : 1' import des classes et packages. 

Prenons l'exemple d'un son que vous choisissez de jouer dans une animation. Vous saisis- 
sez tout naturellement vos lignes d' instructions dans la fenetre Actions en appelant un 
certain nombre de methodes des classes Sound et SoundChannel. Selon vous, comment Flash 
peut-il faire la distinction entre les termes qu'il connait et ceux que vous creez (comme les 
noms d'instances) ? Par ailleurs, comment reconnait-il un appel a une methode precise 
d'une classe ? 

Au demarrage de Flash, vous avez peut-etre observe qu'en bas a gauche de l'ecran 
d'accueil (figure 1-38), des textes se succedent. II s'agit du chargement des ressources 
dont le logiciel a besoin pour fonctionner. Parmi celles-ci, il en est une qui contient des 
informations capitales pour pouvoir programmer en mode sequentiel dans la fenetre 
Actions de l'interface de Flash. Cette ressource se trouve dans un fichier texte intitule 
implicitlmports.xml, dont voici le contenu : 



<impl icit Imports Li st> 

<impl i ci t Import name = 

<impl icitlmport name = 

<impl icitlmport name = 

<impl icitlmport name = 

<impl icitlmport name = 

<impl icitlmport name = 

<impl icitlmport name = 

<impl icitlmport name = 

<impl icitlmport name = 

<impl icitlmport name = 

<impl icitlmport name = 

<impl icitlmport name = 

<impl icitlmport name = 

<impl icitlmport name = 

<impl icitlmport name = 

<impl icitlmport name = 

</impl i ci t Imports Li st> 



"adobe. utils.*"/> 
"flash. accessibility . 
"flash. display. *"/> 
"flash. errors. *"/> 
"flash. events. *"/> 
"flash. external .*"/> 
"flash. filters. *"/> 
"flash. geom.*"/> 
"flash. media. *"/> 
"flash. net. *"/> 
"fl ash. printing. *"/> 
"flash. system. *"/> 
"flash. text. *"/> 
"flash. ui.*"/> 
"flash. utils.*"/> 
"flash. xml.*"/> 



"/> 



II decrit les imports de classes et de packages indispensables en programmation orientee 
objet. Comme ce fichier est lu au lancement de Flash, il n'est pas necessaire de debuter 
vos programmes par la liste de ces imports. 



Remarque 

Le defilement des textes au lancement de Flash etant trop rapide, la copie d'ecran de la figure 1-38 ne 
correspond pas au chargement des ressources necessaires en programmation orientee objet. 



Si vous decidez de travailler en mode de programmation sequentielle, vous pouvez toujours 
editer le fichier implicitlmports.xml afin d'y inclure d'autres packages ou classes. Cela 
vous evitera de faire appel a la directive import. 
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Figure 1-38 

Le defilement des differents textes de la page d'accueil correspond au chargement des ressources necessaires 
an fonctionnement de Flash. 
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Figure 1-39 

Lefichier implicitlmports.xml se trouve dans le dossier ActionScript 3.0 du dossier Configuration de V application 
Flash CS3. 

Lorsque vous redigez un programme dans un fichier ActionScript, a partir de Flash ou 
bien meme d'une application externe, vous devez utiliser la directive import afin de specifier 
les noms de classes et/ou de packages a importer dans votre projet. 

L'une des premieres difhcultes auxquelles vous aurez a faire face lors de la redaction de 
vos premiers scripts sera de determiner les classes a importer. Consultez la partie Les 
packages et classes de 1' annexe de ce livre afin de decouvrir les imports les plus courants. 



Avantages et inconvenients des deux modes de programmation 

Avant de vous presenter les avantages et inconvenients de ces deux modes de program- 
mation, il est utile de prendre en consideration le niveau du developpeur. Comme nous 
l'avons indique precedemment, le choix entre ces deux modes est difficile, et depend, 
notamment, de votre aptitude a comprendre la programmation en general. 
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La programmation structuree, appelee egalement sequentielle 

Avantages 

• Ce mode de programmation presente l'avantage d'etre plus abordable et plus facile a 
comprendre que la POO. 

• A court terme, vous serez done plus productif car la POO necessite une longue 
pratique pour atteindre une bonne maitrise. 

• Les animations sont plus rapides a developper si elles ne sont pas trap complexes. 

• Si votre animation est bien realisee (avec une certaine rigueur dans la redaction de vos 
scripts), davantage de personnes pourront la corriger. 

• Le code est contenu dans un seul fichier d' extension . f 1 a. II peut egalement etre place 
sur differentes images-cles, facilitant ainsi la gestion du declenchement des scripts 
dans le temps. 

Inconvenients 

• Ce mode n'est pas adapte aux projets complexes. 

• Le code present sur des images-cles ne facilite pas le deboguage. 

• Si vous n'utilisez pas les classes externes personnalisees (techniques propres a la POO), 
vous risquez de perdre du temps et etre de ce fait moins productif. 

La programmation orientee objet 

Avantages 

• Ce mode est adapte aux projets complexes, car son principe de programmation repose 
sur une organisation rigoureuse et methodique des differentes parties d'un programme. 
Rigueur et methode, deux qualites essentielles pour conduire un projet de grande 
envergure ! 

• Le code est stocke dans des fichiers externes, qui peuvent done etre reutilises dans 
d'autres projets. Cela optimise, par la meme occasion, la productivite. 

• II est plus facile de corriger ou de reprendre un projet developpe en POO car la rigueur 
inherente a ce mode de programmation a pour effet de generer des lignes d' instructions 
plus claires. 

Inconvenients 

• Ce mode de programmation est plus difficilement abordable pour un large public. 

• II est necessaire de le pratiquer pendant de nombreuses semaines (voire des annees) 
avant de pouvoir etre vraiment operationnel. 

• Les animations realisees en POO ne peuvent etre reprises et corrigees que par des deve- 
loppeurs ayant le meme niveau de competence que vous en matiere de programmation. 

Comme vous pouvez le constater, les avantages et inconvenients de chacun des modes se 
valent. 
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La gestion des occurrences 

sur la scene 



Afin d'optimiser votre code pour gerer les occurrences affichees sur la scene, il est 
important de comprendre le role et le fonctionnement de la liste d'affichage (displayList). 
Nous consacrons done un chapitre a ce systeme de gestion. Nous presenterons ensuite la 
methode addChildO, dont le but est de placer une instance de type objet d'affichage ou 
conteneur d'objets d'affichage sur la scene. 

La liste d'affichage (displayList) dune animation 

Le fait de referencer tous les objets d'affichage et les conteneurs d'objets d'affichage 
presents dans une animation est la notion la plus elementaire de 1'ActionScript 3. 

Dans les versions precedentes, nous devions indiquer le chemin d'une occurrence pour 
pouvoir l'utiliser. La hierarchie qui existait entre les occurrences d'une animation decoulait 
de l'emploi d'une succession d' imbrications d'instances de type MovieClip. 

Une arborescence etait tout de me me constitute virtuellement dans la me moire de l'ordi- 
nateur pour determiner les parents et les enfants eventuels d'un objet d'affichage ou d'un 
conteneur d'objets d'affichage. 

Avec l'arrivee de l'AS3, la gestion des occurrences affichees sur la scene est done diffe- 
rente, plus souple et plus logique. Ne plus devoir cibler une instance, en precisant son 
chemin avec une syntaxe pointee, peut eventuellement troubler les anciens developpeurs 
Flash. Cela dit, le developpement consacre a la methode addChi 1 d( ) a la fin de ce chapitre 
vous demontre la simplicite d'acces a une occurrence, meme si elle se trouve imbriquee 
dans un ou plusieurs conteneurs d'objets d'affichage. 
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Par ailleurs, nous ne sommes plus limites a des clips et des boutons : il existe a present 
plusieurs types d'objets regroupes en classes. 



Remarque 

Si ce dernier point vous parait trap abstrait, ajoutons que chaque type d'objet possede son propre vocabu- 
laire, c'est-a-dire un ensemble de mots reserves associe aux instances qu'il generera. Pour celles et ceux 
qui travaillaient avec Flash 8 et les versions anterieures, les symboles de type Bouton et ceux de type Clip 
constituent un bon exemple : ce sont deux objets de types differents. 



Chaque fois que vous placez une occurrence sur la scene, manuellement (par glisser- 
deposer) ou dynamiquement (en AS, avec la methode addChildO ou un moyen equiva- 
lent), vous alimentez une liste d'affichage, appelee egalement displayList. Celle-ci 
permet une gestion globale des occurrences de la scene. II est ainsi possible de determi- 
ner, par des instructions en ActionScript, le nombre d' imbrications d'occurrences (occur- 
rences qui possedent elles-memes d'autres occurrences), ce qui n'etait pas le cas dans les 
anciennes versions de Flash. 

II est main tenant important de comprendre que vous pouvez disposer de deux types d' instan- 
ces sur la scene : les occurrences qui peuvent en contenir d'autres (representees par des 
rectangles gris sur la figure 2-1) et les occurrences qui ne peuvent contenir rien d' autre que 
la representation graphique qui les symbolise (les rectangles blancs de la meme figure). En 
d'autres termes, on distingue les occurrences qui peuvent posseder des enfants de celles qui 
ne le peuvent pas. La liste d' affichage des instances contenues sur la scene de Flash constitue 
done une hierarchie qui peut etre geree sous la forme de nceuds XML avec une racine (la 
scene d'une animation) et des nceuds enfants (les objets d'affichage ou les conteneurs d'objets 
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d'affichage). Cela s'avere tres pratique pour cibler une occurrence precise de la scene. 
La scene de Flash est alors le premier conteneur de la liste d'affichage. 

Quelle difference doit-on faire entre les objets d'affichage et les conteneurs d'objets 
d'affichage ? 

Celles et ceux qui ont utilise les anciennes versions de Flash, se souviennent que les occur- 
rences de type clip pouvaient en contenir d'autres (de meme type ou de type different). De 
ce fait, en ActionScript, il etait possible de faire reference a une occurrence imbriquee dans 
une autre. En revanche, une occurrence de type graphique ne pouvait pas etre controlee par 
ce biais ; il ne servait done a rien d'y placer des occurrences de clips nominees. 

Nous pourrions ainsi comparer les conteneurs d'objets d'affichage a des occurrences de 
type MovieClip et les objets d'affichage a des occurrences de symbole de type Graphique, 
a une difference pres : un objet d'affichage ne peut pas contenir d'autres instances (quel 
que soit son type). 

Plus generalement, un conteneur d'objets d'affichage est une occurrence (ou une instance) 
qui peut en contenir d'autres, alors qu'un objet d'affichage ne le peut pas. Des que vous 
placez un symbole sur la scene ou creez une instance en ActionScript et l'ajoutez avec la 
methode addChildO (ou un moyen equivalent), vous creez un objet d'affichage ou un 
conteneur d'objets d'affichage. Vous augmentez par la meme occasion le nombre 
d'objets contenus dans la liste d'affichage. 

Un objet d'affichage est toujours type (au meme titre qu'une occurrence de symbole est 
de type MovieClip, Bouton ou Graphique). Le schema de la figure 2-2 presente les differents 
types d'objets (ou classes) disponibles dans une animation Flash. Precisons ici la notion 
d'heritage : un objet herite des caracteristiques (proprietes, methodes et evenements) de 
l'objet qui se trouve immediatement au-dessus de lui dans la hierarchie. 
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Figure 2-2 

Cette arborescence vous presente V ensemble des classes disponibles enAS3 et leurs heritages respectifs. 
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Les conteneurs d'objets d'affichage 

Voici les differentes types de conteneurs d'objets d'affichage. 

• II est conseille d'utiliser les instances de la classe LoaderC ) pour charger des images sur 
la scene (ou egalement des SWF). 

• Les instances de la classe Spri te( ) servent a definir les zones principales de l'interface 
de votre animation. D'une facon plus generale, la fonction d'une instance de Sprite( ) 
est de contenir d'autres instances. 

• Les instances de la classe MovieCl ip( ) sont comparables a celles de la classe SpriteC ) a 
un detail pres : elles possedent un scenario (timeline), ce qui signifie qu'elles peuvent 
contenir des images-cles. 



Rappel 

Avant la creation de la classe SpriteC ) (apparue dans Flash CS3), le MovieClip servait de conteneur 
d'affichage sans avoir pour autant les memes avantages que les instances de la classe SpriteC ). 



La section Structurer une mise en page avec les classes SpriteC ) ou MovieCl ip( ) permet 
de mieux comprendre comment organiser la construction d'une image. 

Les objets d'affichage 

Commencons par preciser que les objets d'affichage enumeres ci-dessous peuvent etre 
obtenus par 1' execution destructions en ActionScript ou en utilisant les outils et les 
commandes proposes dans l'interface de Flash. 

Lorsqu'un objet d'affichage est place sur la scene, il ne peut pas servir de conteneur 
d'affichage. Prenons l'exemple d'un rectangle trace sur la scene avec un outil de dessin. 
Vous pouvez definir ses proprietes (couleurs de fond et de contour, epaisseur du trait, 
etc.), mais pas lui aj outer une image ou un texte. 

L'instruction « ajoute une image bitmap dans le rectangle que tu viens de dessiner sur la 
scene » ne signifierait d'ailleurs rien. En revanche, si nous precisions « ajoute une image 
bitmap dans le clip que tu viens de creer a partir du rectangle que tu avais prealablement 
des sine », cela aurait plus de sens : vous comprendriez qu'il faut editer le symbole pour lui 
ajouter une image bitmap. Le clip est alors, dans ce cas, un conteneur d'objets d'affichage. 

Voici une liste des differents types d'objets d'affichage. 

• Shape : permet de tracer dynamiquement des droites, des courbes et des formes 
geometriques sur la scene (a l'aide des outils de l'interface ou en faisant appel a des 
instructions en AS3). 

• Bitmap : permet d'afficher une image bitmap sur la scene (en important une image a 
partir du menu Fichier>Importer ou a l'aide d' instructions en AS3). 
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• TextField : permet de creer un texte dynamique sur la scene (a l'aide de l'outil Texte, 
disponible dans la barre d'outils de l'interface, ou d' instructions en AS3). 

• Video : permet d'afficher une video sur la scene (a l'aide du symbole de type Video ou 
d' instructions en AS3). 

Les instances des classes MorphShape, StaticText et SimpleButton ne peuvent pas etre 
creees dynamiquement a partir d' instructions ActionScript, mais elles constituent tout de 
meme des objets d'affichage. 



Un TextField 

II s'agit d'une zone de texte dont le contenu peut etre modifie dynamiquement au cours du deroulement de 
I'animation. Ce changement peut etre realise par le programme ou directement via l'interface de I'animation 
par une saisie de I'utilisateur. 



Vous aurez compris qu'il faut distinguer deux types d'objets d'affichage : ceux qui 
servent a regrouper plusieurs objets d'affichage en un seul (les conteneurs) et ceux qui ne 
servent a contenir qu'un seul element (un texte, une image, une video, une forme). 

La difficulte relative aux objets d'affichage n'est pas de differencier ces deux types pour 
savoir quand utiliser l'un ou l'autre : ce choix decoulera directement de vos besoins. II 
s'agit plutot d'etre capable de definir judicieusement l'ensemble des conteneurs de votre 
animation. 

Difference entre un objet d'affichage et une occurrence 

En AS1/2, les notions d'objet d'affichage et de conteneur d'objets d'affichage n'existaient 
pas : nous parlions alors, a tort, uniquement d'occurrence et d'instance. 

Generalement, le terme occurrence faisait reference a la representation graphique d'un 
symbole sur la scene, alors qu'une instance resultait de l'instanciation d'une classe. 
Malheureusement, ce que peu de personnes savaient, c'est qu'un glisser-deplacer d'un 
symbole sur la scene revenait a instancier celui-ci. Nous pouvions done parler d'instance 
pour evoquer une occurrence. Certains developpeurs maitrisant correctement la program- 
mation orientee objet utilisaient et utilisent toujours ce terme. Aujourd'hui, avec la 
nouvelle methode qui permet de placer un symbole sur la scene a partir de 1' ActionScript, 
la notion d'instance prend tout son sens. 



Remarque 

Le terme occurrence se traduit en anglais par instance ! 



Partons du postulat qu'une occurrence et une instance designent la meme chose, la repre- 
sentation d'un symbole ou un exemplaire d'une classe. 

Lorsque, par exemple, nous placons un symbole de type Clip sur la scene, parle-t-on 
d'objet d'affichage (et de quel type) ou d' occurrence/instance ? 
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II s'agit en fait des deux, ce que resume le script ci-dessous. 

var monMessage = new TextField( ) ; 
monMessage.text = "Bonjour"; 
addChild(monMessage) ; 
monMessage. x=50; 
monMessage. y=50; 

Pour creer un texte dynamique ou de saisie sur la scene, nous creons une instance de la 
classe TextFieldO. Nous ajoutons ensuite cette instance a la liste d'affichage : elle fait 
done partie de cette liste en tant qu'objet d'affichage. En definissant les proprietes x et y 
de l'instance monMessage, nous utilisons le fait que l'objet d'affichage est encore une 
instance. 

Structurer une mise en page avec les classes SpriteQ ou MovieClipQ 

Pour construire et gerer les differentes parties d'une animation, les utilisateurs de Flash, 
dont le profil est plutot graphique, se servent generalement du scenario propose dans 
l'interface du logiciel. Le deplacement de la tete de lecture fait alors apparaitre les diffe- 
rents ecrans de 1' animation associes a des images-cles. Nous allons decouvrir ici une 
autre technique, basee sur 1' ActionScript, qui, bien qu'elle soit legerement plus complexe 
et beaucoup plus abstraite, est plus efficace. 

En effet, vous avez tout interet a gerer les changements d'affichage des differentes zones 
de votre animation en ajoutant et en supprimant, ou en affichant et en masquant, les 
objets d'affichage presents sur la scene. Cela sous-entend que 1' analyse de l'interface de 
votre animation a permis de definir des zones principales et des zones secondaires. 

Dans l'exemple ci-contre, vous pouvez constater que la mise en pages du site macgeneration 
est basee sur la grille que nous mettons en evidence dans la figure 2-4. Sans parler 
d'ergonomie, qui reste tout de meme un objectif ineluctable lors de la construction d'une 
interface, vous noterez que la simplicite de lecture de cette page est due a une bonne structure. 

Pour celles et ceux d'entre vous qui utilisent les CSS, vous comprendrez toute l'importance 
des developpements suivants. 

Avec l'arrivee de 1'ActionScript 3, l'utilisation de la classe SprlteO nous permet d'orga- 
niser une mise en page sous la forme de blocs, e'est-a-dire des zones delimitant les diffe- 
rentes parties d'une animation. Par exemple, le decoupage propose dans la figure 2-4 (qui 
permet d'obtenir le resultat de la figure 2-3) contient des instances de la classe SprlteO. 

Lorsque vous ferez appel a la classe Sprite( ) pour definir le point d'ancrage des differentes 
zones du quadrillage de votre mise en page, vous definirez ses coordonnees x et y. 



Point d'ancrage d'une zone 

II s'agit du coin superieur gauche d'un rectangle delimitant une zone. 
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Figure 2-3 

La mise en forme de cette page est composee de zones. 
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Figure 2-4 

Le quadrillage de gauche met en evidence les zones principales du site macgeneration, a Vinterieur desquelles 
figurent des zones secondaires, presentees dans le quadrillage de droite. 
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La methode addChild() 

Cette methode constitue Faction elementaire pour placer dynamiquement un objet d'affi- 
chage ou un conteneur d'objets d'affichage sur la scene (ou dans une instance deja presente 
sur la scene). En consequence, l'objet ou le conteneur est ajoute a la liste d'afhchage. 



Note aux anciens developpeurs en AS1/AS2 

Les methodes createEnptyMovieClipO et attachMovie( ) en AS1/AS2, ne peuvent plus etre utili- 
sees. Elles ont ete partiellement remplacees par la methode addChi 1 d( ). 



Lorsque vous aurez besoin de placer un symbole (avec liaison) de la bibliotheque sur la 
scene, vous utiliserez la methode addChildO. 

Celle-ci vous servira egalement a placer dynamiquement un texte sur la scene, apres 
avoir cree une instance de la classe TextField( ). 

Elle sera encore utile a l'instanciation d'une classe personnelle, dans le but de construire 
un objet d'affichage sur la scene. 

Nous pourrions continuer ainsi 1' enumeration des cas oil vous emploieriez la methode 
addChildO ; non seulement, elle ne serait pas exhaustive, mais cela ne servirait a rien. 
Vous comprendriez vite que cette methode a toujours le meme role : rendre visible sur la 
scene des instances prealablement creees. 

Maintenant que nous savons definir les objets d'affichage et les conteneurs d'objets 
d'affichage et que nous connaissons leur role, nous devons apprendre a les gerer dans une 
animation et done f aire appel a la methode addChildO. 

Tout d'abord, distinguons les instances que vous placerez directement sur la scene de 
celles que vous ajouterez dans des instances (des conteneurs d'objets d'affichage) deja 
presentes sur la scene. En considerant l'exemple de la figure 2-5, nous devons commen- 
cer par creer directement 6 instances de la classe Sprite ( ) sur la scene. Nous pourrons 
ensuite y ajouter des objets d'affichages. 



Figure 2-5 

Les six zones de cette mise 
en page sont definies par 
des instances de la classe 
SpriteO. 
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Fichier de reference : Chapitre2/addChi ldQuadrillage.fi a 

var spEnTete:Sprite = new SpriteO; 
var spChapeau:Sprite = new SpriteO; 
var spMargeGaucheiSprite = new SpriteO 
var spCorpsGaucheiSprite = new SpriteO 
var spCorpsDroiterSprite = new SpriteO 
var spMargeDroiteiSprite = new SpriteO 

addChild(spEnTete); 

addChild(spChapeau) ; 

addChild(spMargeGauche) 

addChild(spCorpsGauche) 

addChild(spCorpsDroite) 

addChild(spMargeDroite) 

Nous avons ajoute le prefixe sp devant chaque nom d'occurrence. Cela ne constitue en 
aucun cas une obligation, mais un simple repere visuel pour reconnaitre qu'il s'agit d'une 
occurrence de la classe SpriteO. 

Comme nous n' avons precise aucune position, les instances sont placees par defaut en 
haut a gauche de la scene. Ajoutons les instructions suivantes pour obtenir la mise en page 
de la figure 2-5. 

spEnTete.x =10; 
spEnTete.y =10; 

spChapeau.x =10; 
spChapeau.y =90; 

spMargeGauche.x =10; 
spMargeGauche.y =120; 

spCorpsGauche.x =135; 
spCorpsGauche.y =120; 

spCorpsDroite.x =515; 
spCorpsDroite.y=120; 

spMargeDroite.x =700; 
spMargeDroite.y =120; 

Les zones nominees dans notre interface etant definies, il est alors facile de programmer 
la suite du script. En nous basant sur la figure 2-4, nous allons ajouter deux zones (et non 4) 
pour pouvoir placer des textes. 



var partieHaut:Sprite 
var partieBasiSprite = 
partieBas.y=100; 



= new SpriteO 
new Sprite( ) ; 



spMargeGauche.addChild(partieHaut) ; 
spMargeGauche.addChild(partieBas) ; 
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II est important de comprendre que la valeur 100, specifiee a la troisieme ligne du script, 
positionne 1' instance a 220 pixels du haut de la scene, 1' instance parent de 1' instance 
partieBas se trouvant deja a 120 pixels du haut de la scene. 



Remarque 



Linstruction partieBas .y=100 peut etre placee avant ou apres la methode addChi ld( ). 



Nous pouvons terminer cet exemple en ajoutant deux textes dans les instances partieHaut 
et partieBas. 

var boutonAccueil :TextField = new TextFieldO; 
boutonAccuei 1 . text="Accuei 1 " ; 
partieHaut. addChi 1 d ( boutonAccueil ) ; 

var boutonContact:TextField = new TextFieldO; 
boutonCont act . text=" Con tact" ; 
partieBas. addChi ld(boutonCont act) ; 

Voici a present une illustration du principal avantage de la liste d'affichage de l'AS3. 
Pour controler ou lire les proprietes de l'instance boutonAccuei 1 , il est inutile de se referer 
a cette derniere en specifiant un chemin a base de syntaxe pointee. II sufht tout simple - 
ment d'ecrire le nom de cette occurrence dans une instruction. Comme elle se trouve 
dans la liste d'affichage, sa position dans l'arborescence est parfaitement connue. 

I trace (boutonAccueil .text) ; 
trace(boutonContact.text) ; 

Le script ci-dessus provoque l'affichage des mots « Accueil » et « Contact » dans la fene- 
tre Sortie de l'interface de Flash. 

Dans la figure 2-1, nous vous avions presente un exemple d'arborescence de la liste 
d'affichage. Voici a present la representation de notre animation. 



Scene 



Instance de la (la«e 
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boutonContact 



Figure 2-6 

Arborescence de la liste d'affichage de notre animation. 



spMargeDroite 
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Rappelons tout de meme qu'une mise en page d' instances sur la scene de Flash n'est pas 
toujours basee sur des grilles comme celles que nous venons de presenter. Voici un 
deuxieme exemple, l'interface d'un DVD-Rom, ou nous avons cree des instances de la 
classe Spritet ) pour definir des zones qui se trouvent a differents endroits sur la scene. 
La mise en page obtenue est presentee dans la figure 2-7. 




Figure 2-7 

Cette mise en page ne pent pas s 'appuyer sur un quadrillage, mais nous utilisons tout de meme des instances 
de la classe Sprite () pour definir des zones. 



La structure correspondante est exposee dans la figure 2-8. 

Dans l'exemple de la figure 2-8, vous observerez que nous avons trace des zones sous la 
forme de rectangles blancs transparents. En realite, la largeur et la hauteur de ces blocs 
n'ont pas ete definies car nous n'avons specifie que l'emplacement des instances de la 
classe SprlteO. Ces positions sont representees par les carres noirs de la figure 2-8. Vous 
noterez que le rectangle situe en bas a gauche de l'interface possede son point d'ancrage 
a droite. En effet, nous avons attache un texte dynamique a cette zone, mais avec un 
alignement de texte a droite. 
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Figure 2-8 

Les blocs de cette mise en page facilitent le developpement, notamment pour ajouter on supprimer un objet 
d'affichage. 



Voici a present un dernier exemple qui resume tout ce que nous venons de voir avec une 
approche plus simplifiee. 

Fichier de reference : Chapitre2/addChild.fla 

var marge:Sprite = new SpriteO; 

addChild(marge) ; 

var corps:Sprite = new SpriteO; 

addChild(corps) ; 

corps. x=100; 

var textel:TextField = new TextField (); 
textel.text="Zone de\rla marge"; 
corps. addChild(textel) ; 

var texte2:TextField = new TextField (); 
texte2.text="Zone du corps\rde la page"; 
marge. addChild(texte2) ; 
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Controler I'ajout d'objets d'affichage avec I'evenement ADDED 

Lorsque vous ajouterez un objet d'affichage a la liste d'affichage, vous aurez la possibility 
d'executer une ou plusieurs actions telles qu'un test, un comptage, le reglage d'une propriete, 
etc. La technique est extremement simple car il suffit d'utiliser I'evenement ADDED. 

Dans l'exemple ci-dessous, a chaque ajout d'un objet d'affichage dans l'instance spMarge, 
nous affichons, dans la fenetre Sortie, le nombre d'enfants de cette instance. 

var spMarge:Sprite = new SpriteO; 

addChild(spMarge) ; 

spMa rge. add Event Li stener (Event. ADDED, affi cher Info) ; 

function afficherInfo(evt: Event) ( 

t race (spMa rge. numChildren) ; 
} 

var commandeliTextField = new TextFieldO; 
commandel.text="Accueil " ; 
spMarge.addChild(commandel) ; 



var commande2:TextField = new TextFieldO; 
commande2.text="Contact" ; 
spMarge.addChild(commande2) ; 

Cet evenement s'avere tres pratique pour mettre a jour certaines informations lors de 
chaque ajout d'un objet d'affichage a la liste d'affichage. 



La propriete stage 

Comme le precise tres clairement le titre de cette section, la scene d'une animation est 
une propriete et non un objet directement accessible. 



Remarque 

Si le terme objet vous gene et si vous avez deja ecrit des scripts en AS1/AS2, remplacez-le par le terme 
instance ou occurrence. 



Avec TAS1/AS2, il etait possible de faire reference a la scene en tant qu'instance : elle 
representait alors la racine d'un document. Rappelons que la classe Stage () etait une 
classe de niveau superieur. Lorsque nous ecrivions le mot Stage (avec un S majuscule), 
nous faisions alors reference a la scene de 1' animation Flash. 
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Pour afficher la largeur d'une occurrence dans la fenetre Sortie de Flash nous devions 
ecrire 1' instruction suivante : 

trace(nomDuneOccurrence._width) ; 

La largeur de la scene pouvait etre affichee a l'aide de l'instruction : 

trace(Stage. width); 

En ActionScript 3, toutes les instructions ci-dessous renvoient le meme resultat, c'est-a- 
dire le chiffre 600 qui correspond a la largeur de la scene. 

trace(stage.stageWidth) ; 
t race (this. stage. stageWidth) ; 
trace(rond.stage.stageWidth) ; 
trace (car re. st age. stageWidth) ; 



Pourquoi rencontre-t-on le mot stage en debut de ligne dans le premier des quatre exemples ? 

Aux 3 e et 4 e lignes de code, nous faisons reference a une instance particuliere. Lorsque ce n'est pas le 
cas, comme a la premiere ligne, I'instance consideree est this. 



Une animation designee par this a la racine d'un script, possede ainsi une propriete 
stage. Toutes les occurrences placees sur la scene, que nous devons qualifier d'objet 
d'afhchage (ou DisplayObject), possedent egalement la propriete stage qui se refere a la 
celle de 1' animation. 

En consequence, si nous essayons d'afhcher thi s a partir d'une image-cle de l'animation, 
nous obtenons : 



trace(this) ; 

[object MainTimel ine] 



Ce resultat peut se traduire par « objet de type timeline principale ». 

Pour celles et ceux qui ont bien compris la notion de programmation objet, voici ce que 
renvoie le script ci-dessous, qui se trouve dans la classe du document d'une animation. 



package { 








import flash. disp' 


ay- 


Sprite; 


publ ic class main 


ext 


ends Sprite { 


function mair 





{ 




tracetthis 


; 






tracetthis 


st; 


ge) 


; 


tracetthis 


Stc 


ge. 


stageWidth) ; 


} 








} 
} 








[object main] 








[object Stage] 








600 
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Remarque 

La classe StageO etait une classe de niveau superieur en AS1/AS2, ce qui n'est plus le cas en AS3. 
Classes de niveau superieur en AS1/2 : 

Accessibility, Array, AsBroadcaster, Boolean, Button, Camera, Color, ContextMenu, 
ContextMenuItem, CustomActions, Date, Error, Function, Key, LoadVars, LocalConnection, 
Math, Microphone, Mouse, MovieClip, MovieCl ipLoader, NetConnection, NetStream, Number, 
Object, PrintJob, Selection, Selection, SharedObject, Sound, Stage, String, System, 
TextField, TextFormat, TextSnapshot, Video, XML, XMLNode, XMLSocket, XMLUI. 
Classes de niveau superieur en AS3 : 

Array, Boolean, Date, decodeURI, decodeURIComponent, encodeLIRI, encodeURIComponent, 
escape, int, isFinite, isNaN, isXMLName, Number, Object, parseFloat, parselnt, String, 
trace, uint, unescape, XML. 



Supprimer un objet de la scene a I'aide de la methode removeChildQ 



Remarque 

Une occurrence qui a ete obtenue sur la scene a partir d'un glisser-deplacer peut etre supprimee a partir de la 
methode removeChildO contrairement la methode removeMovieClipO que nous utilisions en AS1/2. 



II est parfois necessaire de supprimer un objet de la liste d'affichage. 

Avant de vous proposer un exemple faisant appel a cette technique de suppression d'une 
instance sur la scene, il est important de preciser ou de rappeler que, dans certains cas, il sera 
plus judicieux de faire appel a la propriete visible que vous reglerez a false pour masquer 
temporairement une occurrence, plutot que de la supprimer de la liste d'affichage. 

La procedure de suppression d'un objet d'affichage de la liste d'affichage est extremement 
simple : elle se resume a 1' execution d'une seule instruction. 

removeChild(cachel) ; 



Remarque 

L'occurrence ne sera plus visible sur la scene, mais elle conservera ses proprietes. 



L' appel de cette methode, sous-entend bien sur l'execution prealable des lignes d' instructions 
suivantes : 

var cacheltCarte; 
cachel = new Carte( ) ; 

addChild(cachel); 

Que devient l'instance cachel apres l'execution de la methode removeChild( ) ? En fait, elle 
existe toujours ; si vous demandez d'ajouter a nouveau cette instance a la liste d'affichage, 
elle est automatiquement replacee. Voici un exemple de synthese des explications ci-dessus. 
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Fichier de reference : Chapitre2/removeChildl.fla 

var cachel:Carte; 
cachel = new Carte( ) ; 

addChild(cachel); 

cachel. x = 250; 
cachel. y =130; 

bt Suppress ion. addEvent Li stener(MouseEvent.MOUSE_DOWN,reti rerCache) ; 

function reti rerCache(evt:MouseEvent) { 

removeChild(cachel) ; 
} 
bt Replacement. add Event Li stener(MouseEvent.MOUSE_DOWN,repl acerCache) ; 

function replacerCache(evt:MouseEvent) { 

addChild(cachel); 
} 

Si vous souhaitez supprimer l'objet d'affichage et plus precisement l'instance de la classe 
Carte, vous devez lui attribuer la valeur nul 1 , apres l'avoir retiree de la liste d'affichage. 



Controler la suppression d'objets d'affichage avec I'evenement 
REMOVED_FROM_STAGE 

Fichier de reference : Chapitre2/removeChild4.fla 

II est interessant et important de savoir qu'a partir du moment ou un objet d'affichage est 
supprime de la liste d'affichage, I'evenement REM0VED_FR0M_STAGE est declenche. Ainsi, dans 
l'exemple ci-dessous, cela permet de tenir une comptabilite des occurrences sur la scene. 

var nbrCartes: Number = 3; 
affichageNbrCartes.text= nbrCartes. toString( ) ; 



btl.addEventListenert Event. REM0VED_FR0M_STAGE .comptabiliserCarte) 
bt2. addEvent Li stener( Event. REM0VED_FR0M_STAGE .comptabiliserCarte) 
bt3. addEvent Li stener( Event. REM0VED_FR0M_STAGE .comptabiliserCarte) 



btl. add Event Listener (Mouse Event. M0USE_D0WN .supprimerCarte) 
bt2. add Event Li stener(MouseEvent.MOUSE_DOWN .supprimerCarte) 
bt3. add Event Listener (Mouse Event. M0USE_D0WN .supprimerCarte) 

function comptabil iserCarte(evt:Event) { 

nbrCartes-- ; 

affichageNbrCartes.text= nbrCartes. toString( ) ; 
} 

function supprimerCarte(evt:Event) { 

removeChild(DisplayObject(evt.currentTarget) ) ; 
} 
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Remarque 

Afin qu'il n'y ait aucune confusion, si vous souhaitez connaitre le nombre d'objets d'affichage contenus 
dans un conteneur ou sur la scene, vous pouvez utiliser la propriete numChi 1 dren. 
Ainsi, I'instruction ci-dessous (a placer sur une image-cle) permet de connaitre le nombre d'objets d'affi- 
chage contenus sur la scene. 
trace(this.numChildren) ; 



Un tel gestionnaire d'evenement facilite la gestion de la suppression de certaines catego- 
ries d' occurrences dans des jeux. 

Nous allons decouvrir, dans un deuxieme exemple, que la methode removeChildO doit 
etre precedee du nom du conteneur d'objets d'affichage qui contient l'objet d'affichage 
que nous souhaitons supprimer. Au cours de ce chapitre, nous avons decouvert qu'il est 
judicieux de regrouper certaines occurrences au sein d'un meme conteneur. Ainsi, vous 
devez prefixer la methode addChildt ) d'un nom de conteneur. Ce nom devra egalement 
etre place devant removeChildO. 

Dans cet exemple, nous creons une instance de la classe Sprite ( ) pour accueillir 3 objets 
d'affichage. Puis, nous programmons un bouton qui, lorsqu'on clique dessus, retire tous 
les objets d'affichage contenus dans l'instance tableJeu. 

Fichier de reference : Chapitre2/removeChild2.fla 

var tableJeu:Sprite; 
tableJeu = new SpriteO; 

addChild(tableJeu); 

var cachel:Carte; 
var cache2:Carte; 
var cache3:Carte; 

cachel = new Carte( ) ; 
cache2 = new Cartet ) ; 
cache3 = new Cartet ) ; 

tableJeu. addChild( cachel) 
tableJeu. addChild(cache2) 
tableJeu. addChild(cache3) 

cachel. x = illustrationTrain.x; 
cachel. y =130; 

cache2.x = ill ustrationBateau.x; 
cache2.y = 130; 

cache3.x = il 1 ustrationAvion.x; 
cache3.y = 130; 
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bt Suppress ion. add Event Li stener(MouseEvent.MOUSE_DOWN, ret i rerCache) 



function reti rerCache(evt:MouseEvent) { 

table Jeu.removeChild(cachel) ; 

table Jeu.removeChild(cache2) ; 

tableJeu.removeChild(cache3) ; 
} 

Nous allons decouvrir, dans un troisieme et dernier exemple, une mauvaise surprise. Pour 
mieux la comprendre examinons la signature de la methode removeChi 1 d( ). 



removeChildO methode 

public function remcveChilti (child: DisplayObject) :DisplayObject 

Figure 2-9 

La methode removeChild() prend pour parametre un nom de type Display-Object, c 'est-a-dire un objet d'affichage 
(ou celui d'un conteneur d'objets d'ajfichage). 



Observez bien le type d' information contenu entre les parentheses ! La methode prend en 
parametre le nom d'un objet d'affichage. Mais alors, lorsque nous programmons une 
fonction de rappel (CallBack) qui fait reference a la propriete currentTarget pour identifier 
un objet d'affichage a supprimer, comment preciser qu'il s'agit d'un objet d'affichage ? 

Dans l'exemple ci-dessous, la ligne d'instruction ne peut pas etre executee. 

removeChi ld(evt. currentTarget) ; 

Vous devez done faire appel a la classe Di spl ayObjectt ) pour preciser au compilateur que 
le parametre evt. currentTarget est bien un objet d'affichage. 

removeChi 1 d (Di spl ay Ob jecttevt. currentTarget) ) ; 

Voici un exemple complet qui illustre notre propos. 

Fichier de reference : Chapitre2/removeChild3.fla 

var cachel:Carte 
var cache2:Carte 
var cache3:Carte 



cachel = new Carte( ) 
cache2 = new Carte( ) 
cache3 = new Carte( ) 



addChild(cachel) 
addChild(cache2) 
addChild(cache3) 



cachel. x = ill ustrationTrain.x; 
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cachel.y =130; 

cache2.x = il 1 ustrationBateau.x; 
cache2.y = 130; 

cache3.x = ill ustrationAvion.x; 
cache3.y = 130; 

cachel. add Event Li stener(MouseEvent.M0USE_D0WN,reti rerCache) 
cache2. add Event Li stener(MouseEvent.M0USE_D0WN,reti rerCache; 
cache3. add Event Li stener(MouseEvent.M0USE_D0WN,reti rerCache; 

function retirerCache(evt:MouseEvent) { 

removeChild(Displ ayObject(evt.currentTarget) ) ; 
} 



removeChildAtQ 



Cette derniere methode vous permettra de supprimer un objet d'affichage en specifiant un 
numero d'index. Ann de mieux comprendre le fonctionnement des index lies aux objets 
d'affichage, consultez le chapitre 4 de ce livre et plus particulierement la section Gerer 
les plans entre deux ou plusieurs occurrences. 



3 



La gestion 
des evenements 



ATTENTION : note aux neophytes en programmation 

Si vous debutez la lecture de ce livre directement a partir de ce chapitre, sans avoir lu integralement les 
deux premiers, precisons simplement que les deux premieres pages de ce chapitre risquent de vous 
paraitre abstraites. Perseverez et n'abandonnez pas ; lisez le chapitre en entier pour avoir suffisamment 
de recul et comprendre ainsi qu'un gestionnaire d'evenement permet de controler I'interactivite dans une 
animation Flash de differentes fagons. 



Pour rendre une animation interactive, il est indispensable de programmer une occurrence 
arm qu'elle reagisse aux clics et survols. 

C'est le role d'un gestionnaire d'evenement qui definit la relation qui existe entre une 
occurrence, un evenement (comme un clic sur une occurrence) et une fonction contenant 
le code a executer lorsque 1' evenement survient. 

Un evenement ne se limite pas au clic sur une occurrence. II en existe de nombreux 
autres que nous vous presenterons tout au long de ce chapitre tels que le survol (appele 
aussi rollover), le double-clic, la pression sur une touche du clavier, etc. 

En ActionScript 3, contrairement aux versions precedentes du langage, il n'existe qu'une 
seule methode pour gerer I'interactivite d'une animation, mais elle est un peu plus complexe 
a mettre en place. 

Tout au long de ce chapitre, nous allons faire reference, au travers des differents exemples 
abordes, a une occurrence intitulee roue_i nst. II s'agit de la roue de la figure 3.1. 
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Figure 3-1 

Tout au long de ce chapitre, nous faisons reference au nom d'une occurrence intitulee roue_inst. 
II s'agit de la roue crantee que vous voyez sur cette copie d'ecran. 

Fonctionnement des gestionnaires d'evenements 

Fichier de reference : Chapitre3/evenementl.f"la 

Que vous placiez votre gestionnaire d'evenement dans un script qui se trouve sur une 
image -cle ou dans un fichier externe, la procedure est la meme, seule la syntaxe differe 
legerement. Nous commencerons par un exemple de script place sur une image-cle. 



Differentes appellations 

Un gestionnaire d'evenement peut etre egalement appele un gestionnaire ou un ecouteur. Les expres- 
sions suivantes signifient la meme chose : creer, placer ou ajouter un gestionnaire ou un gestionnaire 
d'evenement ; creer, placer, ajouter ou enregistrer un ecouteur. Les ecouteurs correspondent a la traduction 
du terme anglais listeners ; on emploie alors egalement I'expression creer, placer, ou ajouter un listener. 



La declaration de la fonction de rappel (callBack) 



Preparation de votre animation 

Afin de pouvoir mettre en pratique le script suivant, placez sur la scene d'une animation deux occurrences 
intitulees roue_i nst et btDecl encheur ; leur apparence n'a pas d'importance. Enregistrez ensuite votre 
animation. 



Tout d'abord, vous devez definir la fonction qui sera executee au moment du declenche- 
ment de l'evenement. Ce dernier sera defini et associe a une occurrence ulterieurement. 
La syntaxe a respecter lors de la declaration d'une fonction est un peu particuliere. 
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I function tournerRoue (evt:MouseEvent) { 
roue_inst.rotation=5; 

Comme vous pouvez le constater, la fonction possede (obligatoirement) une variable 
locale typee (evt:MouseEvent). L'oubli de ce parametre entraine une erreur lors de 
l'execution du programme. II s'agit du nom de l'objet qui va receptionner toutes les 
informations renvoyees au moment de la detection du declenchement de l'evenement. 
D'ailleurs, si nous affichions le contenu de la variable evt, voici ce que nous obtiendrions : 

trace(evt) ; 

[MouseEvent type="mouseDown" bubbles=true cancel able=false eventPhase=2 

localX=2 localY=3 stageX=102.5 stageY=142 relatedObject=nul 1 

ctrl Key=false altKey=false shiftKey=false delta=0] 




Remarque 

Dans cet exemple, nous avons choisi arbitrairement le terme evt, mais nous verrons dans ce chapitre que 
ce mot peut etre choisi librement, sous certaines contraintes (pas de caracteres accentues ou speciaux, 
ni meme d'espace, pas de capitale initiale). 



II s'agit d' informations relatives a 1' occurrence cliquee ou survolee (tout depend de 
l'evenement defini). Ainsi, nous savons par exemple que 1' occurrence se trouve a 
102,5 pixels du bord gauche de la scene, que le clic s'est produit a 2 pixels (horizontale- 
ment) du point d'alignement de l'occurrence, que la touche Shift n'a pas ete maintenue 
au moment du clic, etc. Toutes ces informations sont accessibles a partir de la simple 
lecture d'une propriete de l'objet evt, ce qui ne requiert pas de nombreuses lignes de 
code. Consultez la section Utiliser les informations stockees dans la variable locale de la 
fonction de rappel pour des explications complementaires. 



Remarque 

Cette fonction est qualifiee de callBack car elle sera appelee (call) en retour (Back) de l'evenement 
detecte. Les lignes de codes qu'elle contient seront alors executees. 



La declaration d'un ecouteur 

Une fois definie la fonction qui sera executee lors du declenchement de l'evenement, il 
faut l'associer a une occurrence et a un evenement donne. C'est l'objet du code suivant : 

btDecl encheur.addEvent Li stenert MouseEvent . M0USE_D0WN , tournerRoue) ; 

Voici ce que signifie cette instruction qui fait appel a la methode addEventListenerO : 
btDecl encheur est le nom de l'occurrence sur laquelle nous allons devoir cliquer, evene- 
ment MouseEvent. M0USE_D0WN, pour executer la fonction de rappel tournerRoue. 

Si vous etiez habitue aux gestionnaires d'evenements de l'ASl/AS2, vous trouverez peut- 
etre cette nouvelle syntaxe un peu plus complexe qu'un simple onPress ou on(press), 
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mais vous vous y ferez vite. L'erreur que vous commettrez le plus souvent lors de vos 
premiers essais sera l'oubli du parametre de la fonction de rappel (evt dans notre exemple). 
Soyez done vigilant. 



Remarque 

Sur les exemples que vous pourrez trouver sur Internet, le nom de I'objet saisi en parametre de la fonction 
de rappel est souvent event. Afin qu'il n'y ait pas d'ambigui'te, avec le type Event, nous avons volontaire- 
ment utilise un autre terme (evt comme abreviation d'event ou evenement). Vous pouvez utiliser le mot de 
votre choix, a partir du moment ou il ne contient pas de caracteres accentues ou speciaux, ni meme 
d'espace, et ne debute pas par une majuscule. 



Le script complet que vous devriez a present obtenir est le suivant : 

function tournerRoue(evt:MouseEvent) { 

roue_i nst . rotati on=5 ; 
} 

btDeclencheur. add Event Li stener(MouseEvent.MOUSE_DOWN,tournerRoue) ; 



Le choix de I'evenement 

Revenons quelques instants sur I'evenement passe en parametres a la methode addEvent- 
ListenerO. Lors de vos premiers essais en AS3, vous ne trouverez pas facilement 
I'evenement approprie, d'une part parce que vous ne connaitrez pas tous les evenements 
disponibles, d' autre part car la syntaxe n'est pas evidente. 

Pour vous aider, voici une liste des principaux evenements que vous pouvez utiliser en AS 3 : 

MouseEvent. CLICK 
MouseEvent. DOUBLE_CLICK 
MouseEvent. M0USE_D0WN 
MouseEvent. M0USE_M0VE 
MouseEvent. MOUSEJUT 
MouseEvent. MOUSEJJVER 
MouseEvent. MOUSEJJP 
MouseEvent. MOUSE_WHEEL 
MouseEvent. ROLLJUT 
MouseEvent. ROLL OVER 



Le double-clic 

Afin que le double-clic soit reconnu dans votre animation, vous devez ajouter la ligne destruction ci- 
dessous a votre script. 

btDeclencheur. doubled ickEnabled = true; 

btDecl encheu r. add Event Li s tener ( Mous e Even t.D0UBLE_C LICK, tourner Roue) ; 
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Vous retrouverez dans les premieres pages de 1' annexe de ce livre, a la section intitulee Les 
packages et classes, la liste des evenements couramment utilises ainsi que tous les autres. 



RollOverOutSide 

Ne cherchez pas cet evenement : il n'existe plus. Vous devez done le programmer en initialisant une varia- 
ble lors du die sur une occurrence, puis en changeant sa valeur lorsqu'un ROLLOUT est constate, et 
enfin, en evaluant sa valeur sur le declenchement de I'evenement MOUSE UP. 



Trouver /'occurrence associee a I'evenement 

Vous aurez parfois besoin de concevoir une fonction susceptible de s' adapter a plusieurs 
occurrences. 

Dans l'exemple ci-dessous, vous decouvrirez que nous ne precisons pas de nom d'occur- 
rence, contrairement au premier script de ce chapitre. 

function tournerRoue(evt:MouseEvent) ( 

evt.currentTarget.rotation=5; 
} 
roue_inst.addEventListener(MouseEvent.MOUSE_DOWN,tournerRoue) ; 

Des que l'utilisateur clique sur l'occurrence intitulee roue_inst (le nom d'instance specifiee 
devant la fonction addEventl_istener( )), elle tourne de 5 degres. 

Cette technique s'avere indispensable lorsque vous concevez des animations ou la 
programmation dynamique joue un role important. 



Script dans un fichier AS 

Fichiers dereference : Chapitre3/evenementlas.fla et evenementl.as 

Voyons a present comment les gestionnaires d' evenements s'inscrivent dans un fichier AS 
pour une approche complete de programmation orientee objet. 



Attention 

Si vous ne connaissez pas la programmation orientee objet, lisez la partie Les deux modes de program- 
mation du chapitre 1 . 



package { 

import fl ash. display. Sprite; 
import flash. events. MouseEvent; 
import flash.display.MovieClip; 

public class evenementl extends Sprite { 

public function evenementl ( ) { 

btDeclencheur. add Event Listener (Mouse Event. MOUSE_DOWN,tourner Roue) ; 
} 
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private function tournerRoue(evt:MouseEvent) 
roue_inst.rotation=5; 



) 

Vous devez commencer par importer la classe Spritet ) car vous etendez la votre a partir 
de ce type. Vous ne devez pas non plus oublier d'importer la classe MovieCl ip( ), car des 
instances de ce type sont presentes sur la scene. 



Remarque 

Une des erreurs les plus frequences lors de vos premiers essais en ActionScript 3 sera I'oubli de I'import 
de la classe MouseEvent. Ne tombez done pas dans le piege. 



Comme vous pouvez ensuite le constater, les fonctions intitulees tournerRoueO et 
addEventLi stenert ) sont utilisees comme en programmation sequentielle. La seule difference 
est l'attribut private de la fonction tournerRoueO. 



Utiliser les informations stockees dans la variable locale de la fonction 
de rappel 

Fichier de reference : Chapitre3/evenement2.fla 



Remarque 

Consultez le chapitre 9 dedie aux tests conditionnels si vous ne connaissez pas cette notion elementaire 
d'algorithmique. 



Meme si vous ne comprenez pas integralement l'exemple qui va suivre (car vous ne 
connaissez pas encore les tests conditionnels if ( ) abordes au chapitre 9 de ce livre), voici 
un exemple ou le code execute dans la fonction de rappel differe selon le type d'evene- 
ment declenche. 



function tournerRoue(evt:MouseEvent) { 
if (evt.type=="mouseDown") { 

roue_i nst . rotati on=5 ; 
} else { 

roue_i nst . rotati on=0 ; 
} 



) 

bt Dec! encheur. add Event Li stener( MouseEvent. MOUSE_DOWN,tourner Roue) ; 
bt Dec! encheur. add Event Li stener( MouseEvent. MOUSEJJP.tourner Roue) ; 

Nous utilisons la meme fonction avec deux evenements differents ! Grace a la propriete 
type de l'objet evt (le parametre de la fonction de rappel), nous determinons l'evenement 
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survenu. Nous pouvons alors effectuer un test pour executer une ligne d'instruction ou 
une autre en fonction du type d'evenement. 

Dans cet autre exemple, nous allons verifier si la touche Shift est enfoncee au moment du 
clic. En fonction de la valeur renvoyee par le test (true ou false), nous allons effectuer 
une rotation de l'occurrence dans le sens des aiguilles d'une montre ou dans le sens anti- 
horaire. 

Fichier de reference : Chapitre3/evenement5.fla 

function tournerRoue(evt:MouseEvent) { 
if ( evt.shiftKey) { 

roue_inst. rotation-=3; 
} else { 

roue_inst. rotation+=3; 
} 
} 

roue_inst.addEventl_istener(MouseEvent. CLICK, tournerRoue) ; 

Quelques mots supplementaires sur les gestionnaires d "evenements 

Les exemples que nous venons d'aborder se limitent a des evenements lies a l'activite de 
la souris, mais vous devez garder a l'esprit qu'il en existe de nombreux autres. Notre 
objectif premier etait de vous faire decouvrir la syntaxe et le fonctionnement d'un 
gestionnaire d'evenement en ActionScript 3. Que vous telechargiez un fichier XML ou 
que vous surveilliez la fin de la lecture d'un son, un gestionnaire d'evenement possedera 
toujours la meme syntaxe. 

Detecter un clic 

Detecter un simple clic sur une occurrence 

II existe 3 evenements pour detecter le clic sur une instance. lis ont chacun leur parti- 
cularite. 

• M0USE_D0WN : evenement detecte au moment ou l'utilisateur enfonce le bouton de la 
souris. 

• MOUSE JP : evenement detecte au moment oil l'utilisateur relache le bouton de la souris. 

• CLICK : evenement detecte au moment ou l'utilisateur relache le bouton de la souris. 



Note 

II n'existe pas de difference entre les constantes CLICK et MOUSEJJP, elles sont toutes les deux compa- 
tibles avec M0USE_D0WN. Dans le cas ou vous feriez appel aux trois, voici leur ordre d'invocation : 
MOUSEJOWN, MOUSEJP, CLICK. 
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Nous vous rappelons, dans cet exemple, comment detecter un clic sur une occurrence : 

function tournerRoue (evt :MouseEvent) { 

traceC'Vous venez de cliquer sur 1 'occurrence intitulee btDeclencheur") ; 
} 
bt Dec! encheur. add Event Li stener(MouseEvent. CLICK, tournerRoue) ; 

Consultez 1' exemple propose dans la section Utiliser les informations stockees dans la 
variable locale de la fonction de rappel, un peu avant dans ce chapitre, pour decouvrir un 
exemple qui met en evidence la subtile difference entre un MOUSEJOWN et un MOUSEJJP. 



Detecter un double-clic sur une occurrence 

Fichier de reference : Chapitre3/evenement3.fla 

Le script est le meme que dans le cas d'un simple clic sur une occurrence, mais l'utilisa- 
tion d'un nouvel evenement n'est pas le seul changement. Vous devez ajouter la propriete 
doubled ickEnabled et la regler sur true. Dans le cas contraire, le double-clic ne sera pas 
reconnu, mais il sera interprete comme des evenements M0USE_D0WN et MOUSEJP. 

function changerTail le (evt:MouseEvent) { 

roue_inst.scaleX=roue_inst.scaleY=Math. random( ) ; 

} 

roue_i ns t. add Event Li stener(MouseEvent.DOUBLE_C LICK, changerTail le) ; 
roue_inst. doubled ickEnabled = true; 



Detecter le clic sur la scene 

Fichier de reference : Chapitre3/evenement4.fla 

Dans certains cas, vous aurez besoin de detecter le clic effectue en dehors de toute occur- 
rence, c'est-a-dire sur la scene. Vous pourrez utiliser les proprietes evoquees jusqu'a 
present (MOUSEJP, MOUSEJOWN, CLICK), mais la cible a laquelle est rattachee la methode 
addEventListenerO est la scene qui se traduit par le terme stage. Dans 1' exemple ci-dessous, 
nous souhaitons connaitre les coordonnees X et Y de 1' emplacement du clic afin, par 
exemple, d'y placer dynamiquement un symbole. 

function indiquerCoordonneesSouris(evt:MouseEvent) { 

trace(mouseX+" - "+mouseY); 
} 



st age. addEvent Li stener(MouseEvent. MOUSEJOWN, indiquerCoordonneesSouris) ; 
ou encore, 

function indiquerCoordonneesSouris(evt:MouseEvent) { 

roue_inst.x=mouseX; 

roue_inst.y=mouseY; 
} 

stage. addEvent Li stener(MouseEvent. MOUSE JOWN.indiquerCoordonneesSouris) ; 
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Detecter la pression sur une touche du clavier 

Fichier de reference : Chapitre3/evenement6.fla 

Vous allez etre surpris par la ressemblance du code necessaire a la detection de la pression 
sur une touche du clavier avec celui que nous avons presente pour la detection des clics 
de souris. 

function tournerRoue(evt:KeyboardEvent) { 

roue_inst.rotation+=3; 
} 

stage. addEvent Listener (Key board Event. KEY_D0WN, tournerRoue) ; 

Le type figurant en parametre de la fonction tournerRoue( ) change pour devenir KeyboardEvent 
et, de ce fait, la constante KEY_D0WN vient remplacer celles que nous avions utilisees 
(MOUSEJJP, CLICK, etc.). De plus, la fonction addEventListenerO est associee a l'instance 
stage et non plus a btDecl encheur ou roue_i nst. 

Pour l'instant, l'evenement KeybordEvent traduit la pression d'une touche du clavier, mais 
ne permet pas encore de determiner le code de la touche pressee. 

C'est justement le cas dans l'exemple suivant, ou la roue tourne dans le horaire ou anti- 
horaire selon que Ton appuie la touche fleche droite ou fleche gauche du clavier. 

Fichier de reference : Chapitre3/evenement7.fla 

function avancer(evt:KeyboardEvent) { 

if (evt.keyCode==37) carre. rotation = carre.rotation-3; 

if (evt.keyCode==39) carre. rotation = carre. rotation+3; 
} 

stage. addEvent Listener (Key board Event. KEY_D0WN, a vancer) ; 



Script dans un fichier AS 

Fichiers dereference : Chapitre3/evenement7as.fla etmainclavier.as 

Le script ci-dessous se trouve dans le fichier texte nomme mainclavier.as. II s'agit de la 
classe du document evenement7as . f 1 a. 

package ( 

import fl ash. display. Sprite; 
import fl ash. events. Key board Event; 
import flash.display.MovieClip; 

public class mainclavier extends Sprite { 

public function mainclavier( ) ( 

s t age. add Event Listener (Key boa rdEvent.KEY_DOWN, a vancer) ; 
} 

private function avancer(evt:KeyboardEvent) { 
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if (evt.keyCode==37) { 

roue_inst. rotation = roue_inst.rotation-3; 
} 

if (evt.keyCode==39) { 

roue_inst. rotation = roue_inst.rotation+3; 



) 

Vous remarquerez que le code est strictement identique et qu'une fois de plus, seule la 
syntaxe propre au developpement oriente objet differe. Vous noterez que la classe MouseE- 
vent n'est pas importee, mais que KeyboardEvent Test. 



Surveiller la saisie de I'utilisateur 



Remarque 

Le chapitre 14 de ce livre traite du meme sujet et aborde deux exemples supplementaires dans la partie Gerer 
les evenements lies au texte. Consultez-le pour de plus amples renseignements sur cette problematique. 



Fichier de reference : Chapitre3/evenement8Bis.fla 

Lorsque vous positionnerez des champs texte de saisie sur la scene d'une animation, vous 
aurez parfois besoin de detecter les evenements suivants : 

• L'utilisateur clique dans la zone du champ texte de saisie. 

• L'utilisateur ajoute ou supprime un caractere (done il saisit un texte ou le modifie). 

• L'utilisateur clique en dehors du champ texte de saisie. 

Vous devrez alors faire appel a 3 types de gestionnaires d' evenements : 

• FocusEvent.FOCUS_IN 

• Focus Event. FOCUSJUT 

• Event. CHANGE ou TextEvent .TEXT_INPUT 

Voici l'exemple d'une animation ou l'utilisateur est invite a saisir un texte dans une zone 
de l'interface. Des qu'il va cliquer et, de ce fait, rendre actif le champ texte de saisie, le 
message initial Tapez votre texte ici... va disparaitre. A chaque fois que l'utilisateur 
ajoutera ou supprimera un caractere, un compteur affichera le nombre de signes contenus 
dans le champ texte de saisie. Enfin, si l'utilisateur clique en dehors du champ texte de 
saisie, un message final indique le nombre total de caracteres frappes. 

function initial iserSaisie(evt: FocusEvent) ( 
if (zoneSaisie.text=="Tapez votre texte ici...") { 

zoneSaisie.text="" ; 

commentai re.text="Mot en cours de saisie"; 
} 
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) 

function terminerSaisie(evt: FocusEvent) { 
commentai re.text="Vous avez tape "+nbrCaracteres.text+" caracteres. 
nbrCaracteres.text="" : 



function touchePressee(evt:TextEvent) { 

nbrCaracteres.text = zoneSaisie. text. length. toString( ) ; 
} 

zoneSai si e. add Event Li stener( FocusEvent. F0CUS_IN, initial iserSaisie) ; 
zoneSaisie.addEventl_istener(TextEvent.TEXT_INPUT,touchePressee) ; 
zoneSai si e. add Event Listener (FocusEvent. FOCUS_OUT,terminerSaisie) ; 



Script dans un fichier AS 

Fichiers dereference : Chapitre3/evenement8as.fla et mainclavier2.as 



Remarque 

Ces fichiers correspondent a I'animation evenement8.fla et non evenement8Bis.fla proposee dans I'exemple 
precedent. 



package { 

import fl ash. display. Sprite; 

import fl ash. text. TextField; 

import fl ash. events. TextEvent; 

import fl ash. events. FocusEvent; 

public class mainclavier2 extends Sprite { 

function mainclavier2( ) { 

zoneSai si e.addEvent Listener (FocusEvent. F0CUS_IN, initial iserSaisie) ; 

zoneSai si e.addEvent Listener (Text Event. TEXT_INPUT,touchePressee) ; 

zoneSai si e.addEvent Listener (FocusEvent. FOCUS_OUT,terminerSaisie) ; 
} 
private function initial iserSaisie(evt: FocusEvent) { 

if (zoneSaisie. text=="Tapez votre texte ici...") { 
zoneSaisie. text="" ; 
commentaire.text="" ; 

} 
} 

private function terminerSaisie(evt:FocusEvent) { 

commentai re. text="Vous avez tape "+nbrCaracteres.text+" caracteres. 
} 

private function touchePressee(evt:TextEvent) { 
nbrCaracteres.text = zoneSaisie. text. length. toString( ) ; 
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La temporisation d'une action avec l'evenement ENTER_FRAME 

Fichier de reference : Chapitre3/evenement9.fla 

Jusqu'a present, tous les evenements que nous avons abordes sont declenches par l'inter- 
vention de l'utilisateur qui clique sur le bouton de la souris ou qui presse une touche du 
clavier. Toutes ces actions font done suite a une action manuelle. Nous aimerions a 
present que des instructions soient executees non seulement sans que l'utilisateur ait a 
cliquer sur la moindre occurrence presente sur la scene, mais egalement en continu. 

Dans l'exemple suivant, nous allons faire tourner une roue crantee en executant en continu 
l'instruction ci-dessous : 

roue_i nst . rotati on+=3 ; 

Pour celles et ceux qui connaissent 1'ActionScript 1 et/ou 2, vous vous souvenez peut- 
etre du fameux onEnterFrame ! Nous allons faire appel au meme evenement, mais a travers 
la structure du gestionnaire que nous commencons a bien connaitre a present : 

function tournerRoue(evt:Event) { 
roue_i nst . rotati on+=3 ; 

} 

st age. addEvent Listener^ Even t.ENTER_FRAME, tourner Roue) ; 

En AS1/2, nous determinions une occurrence pour y associer l'evenement onEnterFrame. 
Dans notre exemple, vous constaterez que nous avons fait appel a la propriete stage, mais 
que nous aurions tout autant pu utiliser le nom d'instance roue_i nst. 

remove/addEventUstenerQ 

La notion que nous allons presenter ici n'a pas ete abordee dans les exemples precedents : 
cela n'etait pas necessaire. En effet, lorsqu'un clic est effectue sur une occurrence ou 
lorsqu'une touche du clavier est pressee, les lignes d' instructions contenues dans la fonction 
de rappel ne sont executees qu'une seule fois. En revanche, dans le cas de l'evenement 
ENTER_FRAME, il est indispensable de controler 1' arret de l'execution continue. Nous devons 
alors proceder a l'annulation de l'ecouteur d'evenement comme dans l'exemple ci-dessous : 

roue_inst.addEventListener(MouseEvent.CLICK,arreterRoue) ; 
function arreterRoue(evt:Event) { 

roue_i nst. remove Event Li stenert Event. ENTER_FRAME, tourner Roue) ; 
} 

Dans cet exemple, l'utilisateur doit cliquer sur l'occurrence concernee par le mouvement 
pour arreter la rotation. Bien entendu, nous pourrions choisir une autre instance. 

Fonctionnalites associees a l'evenement ENTER_FRAME 

Vous decouvrirez dans le chapitre 9 de ce livre qu'un test dans un programme peut etre 
realise a differents moments de l'execution d'un script ou d'une animation. Dans le cas 



La gestion des evenements 

Chapitre 3 

ou vous auriez besoin d'effectuer une verification en continu, l'utilisation de l'evenement 
ENTER_FRAME constitue une solution interessante. 

Par ailleurs, nous vous invitons a consulter le chapitre 5 pour decouvrir les mouvements 
obtenus a l'aide de l'evenement ENTER_FRAME. 



Script dans un fichier AS 

Fichiers dereference : Chapitre3/evenement9as.fla et maintourner.as 
package { 

import fl ash. display. Sprite; 
import fl ash. events. Event; 
import flash.display.MovieClip; 

public class maintourner extends Sprite { 

function maintournerO { 

roue_inst. add Event Li stenert Event. ENTER_FRAME, tournerRoue) ; 
} 

private function tournerRoue(evt:Event) { 
roue_i nst . rotati on+=3 ; 



) 

N'oubliez pas d'importer la classe Movi eCl 1 p, car meme si vous n'y faites pas directement 
reference dans le script, vous utilisez un symbole de type MovieCl ip sur la scene. 



La temporisation d'une action avec la classe Timer() 

Fichier de reference : Chapitre3/evenementl0.fla 

Comme nous l'avons presente dans l'exemple precedent, la programmation d'une execu- 
tion en continu est tres simple. Cependant, nous ne pouvons pas preciser le delai qui 
separe deux repetitions. 

La classe Timer ( ) permet justement de preciser ce parametre, mais egalement le nombre 
de repetitions ; il sera done plus judicieux, dans certains cas, de faire appel a elle. 

Commencons par instancier la classe Timer( ), puis a faire appel a la fonction AddEvent- 
Li stener( ) pour associer un evenement a une fonction de retour. 

Ivar moteur:Timer = new Timer(20,10) ; 
moteur. add Event Listener (Timer Event. TIMER, tournerRoue) ; 
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Le premier parametre passe a la fonction Timer ( ) (20 dans notre exemple) correspond a la 
vitesse d'execution. En choisissant la valeur 1 000, le delai entre deux repetitions serait 
de 1 seconde (soit 1 000 millisecondes). 

Le deuxieme parametre (10 dans notre exemple) permet de preciser le nombre de repeti- 
tions. Si nous avions souhaite qu'il ne soit pas limite, nous aurions precise la valeur 0. 

A ce niveau la du script, nous devons preciser le contenu de la fonction de rappel. 

I function tournerRoue(evt:Event) { 
roue_i nst . rotati on+=3 ; 

II ne reste plus qu'a enclencher le timer. 

moteur.startO ; 

Nous avons volontairement choisi le nom d'instance moteur, afin de montrer l'analogie 
entre le fonctionnement de la classe TimerO et celui d'une horloge, d'une mecanique, 
d'un moteur... 

Pour arreter un timer, il suffit tout simplement d'utiliser le gestionnaire d'evenement ci- 
dessous : 

roue_inst.addEventListener(MouseEvent.CLICK,arreterRotation) ; 
function arreterRotation (evt:MouseEvent) { 

moteur. stopO ; 
} 

Nous devons alors cliquer sur la roue pour arreter le timer. Lorsque ce dernier se termine, 
nous pouvons prevoir une action a executer : 

function finBoucle(evt:TimerEvent) { 

roue_inst.scaleX=0.8; 

roue_inst.scaleY=0.8; 
} 
moteur. add Event Listener (Timer Event. TIMER_COMPLETE,finBoucle) ; 

L' occurrence roue_i nst subit un changement d'echelle de 80 % au bout de 10 executions 
de la fonction de rappel. 

Voici le script complet de l'animation evenementlO . f 1 a : 

var moteur:Timer = new Timer(10,50) ; 

moteur. add Event Listener (Timer Event. TIMER, tourner Roue) ; 
moteur. start( ) ; 

function tournerRoue(evt: TimerEvent) { 

roue_i nst . rotati on+=3 ; 
} 

function arreterRotation(evt:MouseEvent) { 

moteur. stop( ) ; 
} 



La gestion des evenements 

Chapitre 3 



roue_inst.addEventListener(MouseEvent.CLICK,arreterRotation) ; 

function finBoucle(evt:TimerEvent) { 

roue_i nst . seal eX=0 . 8 ; 

roue_i nst . seal eY=0 . 8 ; 
} 
moteur. add Event Li stener( Timer Event .TIMER_COMPLETE.fi nBoucle) ; 

Comme nous l'evoquions pour l'evenement ENTER_FRAME, nous vous invitons a consulter 
le chapitre 5 pour decouvrir les mouvements obtenus a l'aide de la classe Timer( ). 



Script dans un fichier AS 

Fichiers de reference : Chapitre3/evenementl0as.fla et maintimer.as 

package { 

import fl ash. display. Sprite; 
import flash.display.MovieClip; 
import fl ash. events. Timer Event; 
import flash. events. MouseEvent; 
import fl ash. util s. Timer; 

public class maintimer extends Sprite { 

public static var moteur:Timer; 
public static var roue_inst:MovieCl ip; 

public function maintimerO { 

moteur=new Timer(10,50) ; 

moteu r. addEven t Listener (Timer Event. TIMER, tourner Roue) ; 
roue_i ns t. add Event Li s tene r ( Mouse Event. CLICK, a rreter Rotation) ; 
moteur. addEven t Listener (Timer Even t.TIMER_COMPLETE,finBoucle) ; 
moteur. startt ) ; 



private function tournerRoue(evt:TimerEvent) { 

roue_inst.rotation+= 3; 
} 

private function arreterRotation(evt:MouseEvent) 
moteur. stop( ) ; 



private function finBoucle(evt:TimerEvent) 

roue_inst.scaleX=0.8; 

roue_inst.scaleY=0.8; 
} 
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Puisque nous faisons appel a deux nouvelles classes, nous devons les importer. II s'agit 
de f 1 ash . events .Timer Event et f 1 ash . uti 1 s .Timer. Voici les messages que vous obtiendriez 
dans le cas contraire. 



I Sonic I Erreurs de cornpiiaucn - 2 siQRilee(s) x I 



Emplacement Description Source 

nnaintimer.as. igrc 23 1046: Ct type est inirouvable cu n'est pm une constant tic compilation : "private Function tournerRouer,evt:TimerEvent] I 

maintimer.as, lirjne 31 1046: Ci type est mrouvab e on n'esi ess une constante de compilation : 'private function finBouclelew:Timer£Jeritl t 



Le message d'erreur est tres clair : Ce type est introuvable ou n'est pas une constante de 
compilation. Aux lignes 23 et 31, nous faisons reference au type TimerEvent alors que 
nous n'avons pas importe la classe ! 



Conclusion 



En dehors de la classe Timer( ), nous avons pu constater que tous les gestionnaires d'evene- 
ments presentent la meme syntaxe. La difficulte relative a cette gestion ne releve done pas 
de la structure du code a saisir, mais plutot de la memorisation de tous les types d'evene- 
ments. Voici un tableau recapitulatif de tous les scripts que nous avons abordes. Consultez 
chaque partie de ce chapitre pour des explications complementaires. 

Tableau 3-1 : synthese des differents evenements gerant I'interactivite 



Ligne d'instruction 

add Even t Listener (Mouse Even t.M0USE_D0WN,tourner Roue) ; 
add E ven t Li stenert Mouse Even t.D0UBLE_C LI CK.tourner Roue) ; 
addEventListener(KeyboardEvent.KEY_DOWN, tournerRoue) ; 
addEventListener(FocusEvent.FOCUS_IN,initialiserSaisie) ; 
add Event Li stenert Text Even t.TEXT_IN PUT, touchePressee) ; 

add E vent Li stenert Even t.ENTER_FRAME, tournerRoue) ; 



Instant 

Clic sur une occurrence 

Double-clic sur une occurrence 

Touche du clavier enfoncee 

Clic dans un champ texte de saisie 

Saisie ou modification d'un texte 
(dans un champ texte de saisie) 

Execution en continu du code contenu 
dans la fonction de rappel. 



ATTENTION : note aux neophytes en matiere de programmation 

Si ce chapitre ne vous a pas semble trap complique et que vous n'avez pas encore lu la partie consacree 
a la programmation objet dans le chapitre 1 et le deuxieme chapitre, revenez-y pour poursuivre votre 
decouverte de la programmation orientee objet et le fonctionnement de la liste d'affichage. Dans le cas 
contraire, lisez le quatrieme chapitre et revenez sur la presentation de la programmation objet du 
chapitre 1 lorsque vous aurez termine de lire la partie I de ce livre. 
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Controler une occurrence 
et naviguer sur la scene 



Ce chapitre, en plus d'etre tres abordable, est absolument indispensable pour etre capable 
d'ecrire ses premiers scripts. 

Nous allons developper les notions de base de controle d'une occurrence, notions que nous 
avons ete amenes a utiliser dans les chapitres precedents sans veritablement les expliquer. 

Les proprietes d'une occurrence 

Comme les gestionnaires d'evenements, qui ont fait l'objet du chapitre precedent, les 
proprietes d'une occurrence sont incontournables. Elles font partie des differents 
reglages elementaires que vous devez connaitre et savoir appliquer a une occurrence 
sur la scene. 

• Les proprietes x et y servent a controler la position de l'occurrence ; sa rotation peut 
etre reglee par la propriete rotati on. 

• La propriete visible sert a masquer ou a afficher l'occurrence. 

• Le reglage de la transparence de l'occurrence est possible a l'aide de la propriete alpha. 

• Les proprietes seal eX et seal eY sont utilisees pour fixer l'echelle de l'occurrence. 

• Enfin, les dimensions de l'occurrence sont determinees par les proprietes wi dth et hei ght. 

Le tableau 4-1 presente les unites, les limites des valeurs a utiliser et les specificites de 
chaque propriete. 
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Tableau 4-1 Unites, valeurs limites et specificites de chaque propriete 



Proprietes 


Fonction sur I'occurrence 


Unite 


Limites 


Specificites 


xety 


Positionner horizontalement 
et verticalement une occur- 
rence sur la scene. Le point 
en x et en y correspond au 
coin superieur gauche de la 
scene. 


Pixels 


Pas de limite 


Des valeurs negatives ou 
superieures aux dimensions 
de la scene permettent de 
masquer une occurrence. 


rotation 


Regie la rotation d'une occur- 
rence selon un ange precis. 
Cette propriete ne genere pas 
une animation. 


Degres 


Pas de limite 


Si vous cherchez a lire 
Tangle de rotation d'une 
occurrence, vous obtiendrez 
toujours une valeur com- 
prise entre -180 et 180, 
alors que vous pouvez utili- 
ser n'importe quelle valeur 
pour le reglage. 


visible 


Afficher/Masquer une occur- 
rence 


Booleen 


true ou false 


Lutilisation de I'operateur ! 
permet de changer la valeur 
de la variable. 


alpha 


Regler la transparence d'une 
occurrence 


Pourcentage 


Entre et 1 . Exemple : 0,5 
pour 50 %. 


Aucune 


scaleX 


Regler I'echelle horizontale et 


Pourcentage 


Entre et 1 theoriquement. 


Lutilisation de valeurs nega- 


et scaleY 


verticale d'une occurrence 




Exemple : 0.5 pour 50%, 
mais on peut aussi aller au 
dela de 1 dans la pratique 
(comme2pour200%). 


tives permet d'obtenir une 
symetrie de I'occurrence. 


width 


Regler la largeur et la hauteur 


Pixels 


Entre et I'infini. 


Aucune 


et height 


d'une occurrence. 









Remarque 

Dans le cas d'une mise a I'echelle d'une occurrence ou d'un changement de taille a I'aide des proprietes 
width et height, optez pour une epaisseurde trait de type Filet dans la palette Proprietes afin de ne pas 
changer I'apparence du trait de contour de I'occurrence. 



II existe plusieurs syntaxes pour fixer la valeur d'une propriete. 

Le reglage d'une simple valeur s'ecrit : roue, rotation = 12; 

Vous noterez que le code a saisir est des plus simples, car il vous suffit de faire reference 
au nom de I'occurrence suivie d'un point, puis de saisir le nom de la propriete, et enfin 
de terminer par affecter une valeur a I'aide de I'operateur =. Dans ce premier exemple, le 
nombre 12 est une valeur numerique ; mais vous pouvez utiliser d'autres types de valeurs : 

• Attribuer le resultat d'un calcul : roue, rotation = 13*17; 

• Attribuer la valeur d'une variable : roue, rotation = orientationlnitialeRoue; 

• Attribuer la valeur de la propriete d'une autre occurrence (avec ou sans calcul supple - 
mentaire) : roue. rotation = roue2.rotation+5; 
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• Regler la valeur de plusieurs proprietes : roue, rotation = roue2. rotation = 5; 

• A ttribuer la valeur renvoyee par une fonction : roue, rotation = Number(positionRoue2); 
Analysons a present quelques exemples. 

Fichier de reference : Chapitre4/proprietesl.fla 

roue.x = 150; 

roue.y = 90; 

roue2.addEvent Li stener(MouseEvent. M0USE_D0WN.pl ace rRoue2) ; 

function placerRoue2(evt:Event) { 

roue2.x=259; 

roue2.y=103; 
} 

• Lignes 1 et 2 : reglage de la position de l'occurrence roue a 150 pixels du bord gauche 
de la scene et 90 pixels du haut. 

• Ligne 3 : attribution d'un ecouteur a l'occurrence roue2. 

• Lignes 4 a 7 : fonction de rappel appelee par 1' ecouteur de la ligne 3. 

• Lignes 5 et 6 : reglage de la position de l'occurrence roue2 a 259 pixels du bord gauche 
de la scene et 103 pixels du haut. 

Ce premier script, tres court, est extremement basique : il permet d' initialiser la position 
d'une occurrence et de definir un ecouteur pour gerer le clic sur une autre (ou sur elle- 
meme). II resume assez bien le coeur des scripts que vous aurez a rediger pour controler 
une occurrence (initialisation et controle par un evenement souris). 

Fichier de reference : Chapitre4/proprietesl.fla 

roue. addEvent Li stener( Event. ENTER_FRAME,tourner) ; 
function tourner(evt:Event) { 

roue. rotation = roue. rotation+3; 

roue2. rotation-=3; 
} 

• Ligne 1 : attribution d'un ecouteur a l'occurrence roue. 

• Ligne 2 : fonction de rappel appelee par 1' ecouteur de la ligne 1. 

• Ligne 3 et 4 : augmentation et diminution des proprietes des occurrences roue et roue2 
de respectivement +3 et -3 pixels. 

Le choix de ce deuxieme script n'est pas du au hasard : il permet de demontrer la methode 
d' incrementation en continu de la valeur d'une propriete, generant ainsi un mouvement. 

Precisons que la gestion l'evenement ENTER_FRAME peut bien souvent etre remplacee par 
une instance de l'objet TIMER( ). 

Les differences d'ecriture des deux lignes d' instructions 3 et 4 montrent qu'on peut utiliser 
deux syntaxes. Nous aurions aussi bien pu ecrire. . . 

I roue. rotation = roue. rotation+3; 
roue2. rotation = roue2.rotation-3; 
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que... 

I roue. rotation +=3; 
roue2.rotation-=3; 

Fichier de reference : Chapitre4/proprietesl.fla 

roue.x = 150; 

roue.y = 90; 

roue. alpha = roue2. alpha = 0.5; 

roue2. addEvent Li stener(MouseEvent.M0USE_D0WN, placer Roue2) ; 
roue. addEvent Li stenert Event. ENTER_FRAME,tourner Roue) ; 

function placerRoue2(evt: Event) { 

roue2.x=259; 

roue2.y=103; 

axe.rotation=-45; 

roue2.rotation=roue. rotation=0; 

roue2. addEvent Li stener( Event. ENTER_FRAME,tournerRoue2) ; 
} 

function tournerRoue(evt:Event) { 

roue. rotation +=3; 
} 

function tournerRoue2(evt : Event) { 

roue2. rotation -=3; 
} 

Nous ne detaillerons pas ligne a ligne ce script car nous ne ferions que repeter les analyses 
presentees ci-dessus. Precisons simplement que nous avons cherche a combiner les deux 
premieres animations pour demontrer qu'un clic sur une occurrence peut entrainer le 
declenchement d'un mouvement continu. 

Observez bien la position de l'ecouteur gerant l'evenement ENTER_FRAME : il se trouve dans la 
fonction de rappel qui est appelee uniquement au moment du clic sur une occurrence. 

Par ailleurs, nous avons egalement cherche a demontrer qu'une occurrence peut se voir 
attribuer plusieurs ecouteurs (roue2, M0USE_D0WN et ENTER_FRAME). 



Les encres 



Lorsque nous faisons reference aux proprietes d'une occurrence en ActionScript, nous 
sous-entendons generalement celles que nous venons d'aborder dans la premiere partie 
de ce chapitre. Cependant, il en existe d'autres. Parmi celles-ci, les encres permettent de 
regler le mode de surimpression d'une occurrence par rapport au contenu de son arriere- 
plan. L' attribution de cette propriete a une occurrence se fait assez simplement en utilisant 
la meme syntaxe que celle que nous venons de voir dans le developpement precedent. 
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La difference est que le nom de l'encre doit toujours etre precede du terme BlendMode et 
d'un point. 

maPhoto.blendMode = BlendMode. OVERLAY; 

Attirons tout de suite votre attention sur les details suivants : le nom de l'encre ne peut 
s'ecrire qu'en majuscules et la propriete blendMode commence par une minuscule, alors 
que le terme situe apres le signe egal debute par une majuscule. 

Voici un premier exemple tres simple, ou le changement d'encre s'effectue lors d'un clic. 

Fichier de reference : Chapitre4/encresl.fla 

btAccueil . addEvent Li stener(MouseEvent.MOUSE_DOWN,surbril lance) ; 

function surbril lance(evt: Event) ( 

btAccueil .blendMode = BlendMode. SCREEN; 
} 

II existe 14 encres utilisables qui ont des effets tres varies. En voici une liste exhaustive : 

ADD 

ALPHA 

DARKEN 

DIFFERENCE 

ERASE 

HARDLIGHT 

INVERT 

LAYER 

LIGTHEN 

MULTIPLY 

NORMAL 

OVERLAY 

SCREEN 

SUBTRACT 

Afin de pouvoir vous rendre compte de l'effet de chaque encre, consultez l'animation 
encres2.fla qui demontre les modes de surimpression d'une image bitmap sur une autre. 

Le script de cette animation est par ailleurs interessant car il permet d'expliquer le chan- 
gement d'apparence d'une occurrence lors d'un survol (ou rollover), remplacant ainsi 
l'effet de survol de certains symboles de type Bouton. 



Attention ! 

Comme vous pouvez le constater, le script suivant contient deux parties : il s'agit de deux exemples places 
dans le meme fichier. Les trois lignes de commentaires signalees par des barres obliques (doubles 
slashs) marquent la separation entre les deux scripts. 
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Fichier de reference : Chapitre4/encres2.fla 

btAccueil .addEventListener(MouseEvent.MOUSE_OVER,surbriller) ; 
btAccueil . add Event Listener (MouseEvent.MOUS E„0UT, annul erSurbril 



lance) ; 



functio 
btAcc 

} 

functio 
btAcc 

} 

// 

// 

// 

btAccue 

btAccue 

btAccue 



n surbriller(evt:Event) { 

ueil .blendMode = BlendMode.ADD; 

n annulerSurbril lance(evt:Event) { 
ueil .blendMode = BlendMode. NORMAL; 



il2.addEventListener(MouseEvent.M0USE_0VER,surbri" 
il2.addEventListener(MouseEvent.M0USE_0llT,surbril' 
il2.addEventListener(MouseEvent.M0USE_D0WN,surbri" 



lance) ; 
ance) ; 
lance) ; 



function surbril 1 ance(evt: Event) { 
if (evt.type=="mouseOver") { 

btAccueil2. blendMode = BlendMode. SCREEN; 
} 
if (evt.type=="mouseOut") { 

btAccueil 2. blendMode = BlendMode. NORMAL; 
} 
if (evt.type=="mouseDown") { 

btAccueil2. blendMode = BlendMode. OVERLAY; 
} 



} 

Si vous avez lu le chapitre 3 de ce livre, ce script ne devrait vous poser aucune difficulte : 
il fait appel a des ecouteurs et des fonctions de rappel. Seule nouveaute, l'utilisation de la 
propriete blendMode. 

Si vous ne connaissez pas les structures conditionnelles utilisees pour effectuer des tests, 
mettez cette partie du script de cote ; vous y reviendrez lorsque vous aurez assimile le 
chapitre 9. Pour l'instant, nous pouvons simplement resumer ces lignes d' instructions en 
precisant que le changement d'attribution d'une encre se fait en fonction de l'evenement 
souris (mouseOver, mouseOut ou mouseDown). 

Passons a present a un deuxieme script dont l'objectif est egalement d'attribuer une encre 
a une occurrence. Ici, le choix de la surimpression est propose dans un menu deroulant. 



Remarque 

Nous sommes obliges d'importer les classes ComboBox et DataProvider car nous utilisons un composant 
de type ComboBox. 
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Fichier de reference : Chapitre4/encres3.fla 

import fl .controls .ComboBox; 
import fl .data.DataProvider; 

var encres:Array = new Array( "add" , "alpha" , "darken" , "difference" ."erase" ,"hardl ight" , 
••"invert" , "1 ayer" , "1 ighten" ."multiply" ."normal " , "overlay" , "screen" , "subtract" ) ; 

var donneesEncres:DataProvider = new DataProvidert ) ; 
for each (var nomEncre:String in encres) ( 

donneesEncres.addltemt {label :nomEncre,val ue:nomEncre} ) ; 
} 

1 isteDesEncres .dataProvider = donneesEncres; 

1 isteDesEncres. rowCount = 10; 

1 isteDes Encres. add Event Listener (Event. CHANGE, en treeSelectionnee) ; 

function entreeSelectionnee(evt:Event) { 

var encreSelectionnee = 1 isteDesEncres. selectedltem. value; 

visuel .blendMode =encreSelectionnee; 
} 

Apportons quelques explications a ce script car il differe de tous ceux que nous avons pu 
voir jusqu'a present. 



Remarque 

Les chapitres 8 et 10 abordent les notions de tableau et de boucle auxquelles nous faisons appel dans 
ce script. 



Ligne 4 : nous creons un tableau intitule encres dans lequel nous stockons 1' ensemble des 
encres disponibles pour la propriete bl endMode. 

Ligne 6: nous creons une instance de la classe DataProvidert ) arin d'y stacker les 
donnees de notre composant. 

Lignes 7 a 9 : cette boucle fort ) permet d'ajouter une a une dans l'instance de la classe 
DataProvidert ), intitulee donneesEncres, toutes les proprietes contenues dans le tableau 

encres. 

Ligne 11 : nous remplissons l'instance du composant de type ComboBox qui se trouve sur 
la scene et s'intitule 1 isteDesEncres. 

Ligne 12 : nous definissons 10 lignes visibles lorsque l'instance du ComboBox se deroule 
sur la scene (figure 4-1). 

Ligne 13 : nous attribuons un ecouteur a l'instance 1 i steDesEncres, arm qu'un change - 
ment d'encre s'effectue au moment de la selection d'une commande dans le menu 
deroulant. 

Lignes 15 a 18 : la fonction de rappel (appelee par l'ecouteur) evoquee a la ligne 13, fait 
reference a la valeur associee commande selectionnee dans le menu deroulant. Rappe- 
lons qu'elle avait ete definie a la ligne 8. 
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Figure 4-1 

Afin de pouvoir visualiser les effets de surimpression d'une encre sur une image, selectionnez-en une dans le menu 
deroulant de gauche (une instance de la classe ComboBox()), le resultat est alors instantane. 

Les filtres 

Comme vous le montrent les figures 4-2 et 4-3, les nitres proposes dans Flash ne sont pas 
comparables a ceux que nous retrouvons dans Photoshop ou d'autres logiciels de traite- 
ment d'image bitmap, a l'exception du flou. lis sont plutot comparables aux Options de 
fusion des caiques (figure 4-4). 



Figure 4-2 

Les filtres peuvent etre appliques 
a une occurrence par le biais 
de I' interface ou en ActionScript. 
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Figure 4-3 

Flash propose 7 filtres differents 
tous tres utiles enfonction de vos 
besoins. 
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Figure 4-4 

Les fibres de Flash sont comparables aux Options de fusion d'un caique dans Photoshop. 



Les filtres peuvent etre appliques a une occurrence par le biais de l'interface mais egale- 
ment a partir de lignes d' instructions en ActionScript. Avant de decouvrir un premier 
script, il est important de comprendre les deux points suivants : 

• Vous n'appliquez pas un nitre a une occurrence, mais vous lui attribuez en fait une liste 
de nitres, representee par un tableau en ActionScript. 

• Vous devez importer les classes des filtres a utiliser, ce qui n'est pas effectue par defaut. 
De ce fait, cela sous-entend que vous allez faire appel a la directive import en debut 
de script. 

Voici un premier exemple simplifie : 

Fichier de reference : Chapitre4/filtresl.fla 

import fl ash.fi 1 ters.DropShadowFilter; 

var 1 isteDesFil tres:Array = new ArrayO; 

var ombreLegere:DropShadowFilter = new DropShadowFilter( ) ; 

1 isteDesFil tres.push(ombreLegere) ; 

leLogo. filters = listeDesFil tres; 

A la lecture de ce premier script, vous pourriez vous demander pourquoi il faut autant de 
lignes d' instructions pour appliquer une simple ombre portee. 



Figure 4-5 

Pour appliquer une simple ombre 
portee a une occurrence, 
il est necessaire d'ecrire 4 lignes 
d 'instructions. 




ActionScript 3 - Programmation sequentielle et orientee objet 



Tout d'abord, cela est du a l'obligation d'utiliser un tableau : sa creation puis l'ajout d'un 
element necessitent au minimum deux lignes d'instructions. 

Ensuite, dans la mesure ou il existe plusieurs types de nitres, nous devons en creer au 
moins un en instanciant la classe de nitre appropriee. 

On peut enfin affecter a la propriete f i 1 ters la liste des filtres choisis. 

Dans l'exemple de la figure 4-5, nous pouvons constater que l'ombre portee est assez 
foncee et presente un faible decalage et un contour peu progressif. Pour modifier cet 
effet, nous allons, dans le script suivant, parameter un filtre avant de l'ajouter a liste des 
filtres applicables a l'occurrence. 

Fichier de reference : Chapitre4/filtres2.fla 






var 1 isteDesFil tres:Array = new ArrayO; 

var ombreLegereiDropShadowFilter = new DropShadowFilter( ) ; 

ombreLegere. distance = 6; 

ombreLegere. alpha = 0.7; 

ombreLegere. bl urX = ombreLegere. bl urY = 8; 

ombreLegere. angle = 135; 

1 isteDesFil t res. push (ombreLegere) ; 

leLogo. filters = 1 isteDesFiltres; 

Le parametrage d'un filtre est tres simple ! Comme vous pouvez le constater, il suffit de 
faire reference aux proprietes a modifier et de leur attribuer une nouvelle valeur. 

Pour celles et ceux qui ont une bonne memoire, voici une ligne d' instruction qui permet 
de preciser les valeurs des proprietes au moment de l'instanciation de la classe DropSha- 
dowFilterO. 



Iva 



r ombreLegere:DropShadowFil ter = new DropShadowFil ter(4, 45, 0, 1, 4, 4, 1, 1, 
false, false, false); 



Le format de l'instanciation de la classe est le suivant : DropShadowFilter(distance, 
angle, couleur, transparence, flou horizontal, flou vertical, intensite, qualite, ombre 
interne ou externe, remplir l'occurrence de la couleur de fond de scene, occurrence 
cachee). 

II est evident que vous ne pouvez pas omettre une valeur ou en intervertir deux ; vous 
devez done preciser toutes les valeurs ou aucune. 

Voici un tableau de synthese qui vous presente les valeurs minimale et maximale des 
differentes proprietes d'un filtre de type ombre portee (DropShadowFilter). 
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Propriete 


Descriptif 


Valeur par 
defaut 


Valeurs mini/maxi 


distance 


Distance de I'ombre (figure 4-8) 


4 pixels 


De -255 a 255 en theorie, aucune limite en pratique 


angl e 


Angle de I'ombre (figure 4-8) 


45 degres 


De a 360 en theorie, aucune limite en pratique. 


color 


Couleur de I'ombre 


(pour le noir) 


De 0x000000 a OxFFFFFF (couleur hexadecimale) 


alpha 


Transparence de I'ombre (figure 4-6) 


1 (Pour 100%) 


De a 1 (0,5 pour 50 %) 


blurX 


Bord progressif horizontal de I'ombre 
(figure 4-6) 


4 


De a 255. Au-dela de 80, I'ombre n'est plus reel- 
lement perceptible. 


blurY 


Bord progressif vertical de I'ombre 


4 


De a 255. Au-dela de 80, I'ombre n'est plus reel- 
lement perceptible. 


strength 


Recouvrement entre I'ombre et 
I'arriere-plan (figure 4-7) 


1 


De a 255 en theorie, aucune limite en pratique. 
Utilisez des valeurs faibles, comprises entre et 1 . 
Dans le cas contraire, vous annulez progressive- 
ment les bords progressifs (blurX et blurY). 


qual ity 


Qualite du rendu de I'ombre 


1 


Trois valeurs possibles theoriquement : 
BitmapFilterQuality.LOW, 
BitmapFilterQual ity. MEDIUM et 
BitmapFil te rQua 1 ity .HIGH. Vous pouvez 
aussi utiliser des nombres compris entre 1 et 3, 
ou encore plus grand (pour un meilleur rendu). 


Inner 


Ombre interieure ou exterieure 


false 


True (interieure) ou false (exterieure). 


knockout 


Occurrence remplie de la couleur 
de la scene. 


false 


True (remplie par la couleur de la scene) ou false 
(vide). 


hideObject 


Occurrence cache pour ne visualiser 
que I'ombre. 


false 


True (cachee) ou false (visible). 



Figure 4-6 

Le parametre blurX permet de regler la valeur 
defondu autour de I'ombre. A gauche, le 
contour de I'ombre n'est pas progressif alors 
qu'il Vest sur V image de droite. 




Figure 4-7 

L'intensite de I'ombre est parametrable 
avec les proprietes strength ou alpha. 




Figure 4-8 

Au centre, une ombre portee normale ; 
a gauche, V angle de rotation a ete regie a 240° 
a droite, le decalage de I'ombre a ete regie 
a 9 pixels. 
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Nous avons aborde le filtre ombre portee (DropShadowFi 1 ter) pour vous presenter la tech- 
nique d'utilisation des nitres en ActionScript. II s'agit du filtre le plus couramment utilise, 
avec le flou (Bl urFi 1 ter), et le plus facile a comprendre. 

II en existe d'autres, tout aussi faciles a manipuler : 

• Bevel Filter 

• GlowFilter 

• GradientGlowFilter 

• GradientBevel Filter 

Et d'autres un peu plus complexes : 

• ColorMatrixFilter 

• Convol utionFil ter 

• Displ acementMapFil ter 

Consultez l'aide en ligne de Flash pour decouvrir les differents reglages a effectuer pour 
ces derniers. 

Revenons sur les filtres Bevel Filter, GardientBevel Filter, GlowFilter, GradientGlowFilter 
et BlurFilter pour vous presenter leurs proprietes respectives. Vous decouvrirez qu'il 
s'agit des memes que celles du filtre DropShadowFi Iter. 

• BlurFilter : bl urX, bl urY et qual ity. 

• BevelFilter : distance, angle, hi ghl i ghtCol or, highlightAlpha, shadowColor, shadowAlpha, 
bl urX, bl urY, strength, qual ity, type. 

• GlowFilter : color, alpha, blurX, blurY, strength, quality, inner, knockout. 

• GradientGlowFilter : distance, angle, colors, alphas, ratios, blurX, blurY, strength, 
quality, type. 

• GradientBevel Filter : distance, angle, colors, alphas, ratios, blurX, blurY, strength, 
quality, type. 

Pour les filtres Bevel Filter et GradientBevel Filter, ajoutons que vous devez preciser des 
couleurs supplementaires, mais qu'elles s'ecrivent egalement en hexadecimal. Par ailleurs, 
la valeur de la propriete type est soit inner, soit knockout. 

Pour les filtres GradientBevel Filter et GradientGlowFilter, les proprietes colors, alphas et 
ratios sont des tableaux. 




Figure 4-9 

Filtre BlurFilter avec line valeur horizontale uniquement (a gauche) et deux valeurs identiques horizontale 
et verticale (a droite). 
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Figure 4-10 

Le fibre BevelFilter permet de dormer 
un effet de relief. 



Figure 4-11 

Le fibre GlowFilter permet de donner 
un effet de lueur externe (ou interne). 




CS3 




Quel que soit le nitre que vous utilisez, n'oubliez pas d'importer les classes correspon- 
dantes. 

import flash.fil ters.DropShadowFilter; 

import flash.fil ters.Bl ur Filter; 

import flash.fil ters. Bevel Filter; 

import flash.fil ters.GlowFi Iter; 

import flash.filters.GradientBevel Filter; 

import flash.fil ters . Gradi entGl owFi 1 ter ; 

import flash.fil ters. Col orMatrixFil ter; 

import flash.fil ters. Con vol uti on Filter; 

import flash.fil ters.DisplacementMapFi Iter; 

Pour conclure, il est important que vous gardiez en tete les informations suivantes : 

• Toutes les ombres de vos occurrences sur une image (de scenario) doivent avoir le 
meme angle. Dans le cas contraire, vous obtiendrez une incoherence graphique. 

• Ne durcissez pas trop vos ombres. Cela signifie que vous devez regler l'intensite ou 
l'alpha de votre ombre de telle sorte qu'elle reste legere. 

• Des ombres sans contour progressif ne sont pas tres esthetiques. 

• Evitez les biseaux, ce n'est pas tres esthetique. Au cas ou vous devriez tout de meme 
utiliser cet effet, essayez d'adoucir les bords. 

• Trop de filtres tuent 1' effet ! Evitez de combiner trop de filtres. 

• Si vous utilisez de nombreux nitres sur une meme image (de scenario), attention de ne 
pas tous les regler en qualite superieure. Vous ralentiriez alors l'affichage, notamment 
dans les mouvements d' occurrences possedant un nitre. 

• Pensez a utiliser l'option hideObject pour manipuler l'ombre d'une occurrence (vous 
devez alors posseder deux fois la meme occurrence sur la scene : une sans ombre, 
l'autre avec, et l'option hideObject activee, valeur true). 
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Effet de bouton qui s'enfonce 

L'effet d'enfoncement lors d'un clic sur l'occurrence d'un clip est une animation des plus 
classiques. Nous allons voir comment la programmer. 

Fichier de reference : Chapitre4/filtres3.fla 

import flash.filters.DropShadowFil ter; 
var 1 i steDesFi 1 tres:Array = new ArrayO; 

var ombrel_egere:DropShadowFilter = new DropShadowFilter( ) ; 

ombreLegere. distance = 6; 

ombreLegere. alpha = 0.7; 

ombreLegere. bl urX = ombreLegere. bl urY = 8; 

ombreLegere. angle = 45; 

1 i steDesFi It res. push (ombre Lege re) ; 
leLogo.fil ters = 1 i steDesFi ltres; 

leLogo. add Event Li stenerCMouseEvent.MOUSE_DOWN,enf once rBouton) ; 
leLogo. add Event Li stener(MouseEvent.MOUSE_UP,relacherBouton) ; 

function enfoncerBouton(evt:MouseEvent) ( 
leLogo. filters=null ; 
leLogo. x+=6; 
leLogo. y+=6; 

} 

function relacherBouton(evt:MouseEvent) { 

leLogo. filters = 1 isteDesFiltres; 

leLogo. x-=6; 

leLogo. y-=6; 
} 

Le debut du script est commun a ceux que nous venons de presenter. Nous avons simplement 
ajoute deux ecouteurs d'evenements qui surveillent l'instant ou le bouton de la souris va 
etre enfonce et celui oil il va etre relache. 

La fonction enf oncerBouton ( ) va annuler le filtre applique a l'occurrence 1 eLogo et decaler 
cette derniere de 6 pixels vers la droite et le bas de la scene. Symetriquement, la fonction 
rel acherBouton( ) replace l'occurrence a sa position d'origine et reapplique le filtre. 

Ce script est relativement simple mais plutot long. II serait utile de l'optimiser en n'ayant 
qu'une seule fonction contenant un test conditionnel, comme nous 1' avons fait avec le 
fichier encre2.fla. 



Script dans un fichier AS 

Fichiers dereference : Chapitre4/filtres3as.fla et main Filtre. as 

Voyons a present comment nous pourrions transcrire ce script dans un fichier externe 

(mainFil tre.as). 
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package ( 

import flash.display.MovieClip; 
import flash. events. MouseEvent; 
import fl ash.filters.DropShadowFil ter; 

public class mainFiltre extends MovieClip { 

private var 1 isteDesFil tres:Array = new ArrayO; 

private var ombrel_egere:DropShadowFilter = new DropShadowFil ter( ) ; 

function mainFiltreO { 

ombreLegere. distance = 6; 

ombreLegere. alpha = 0.7; 

ombreLegere. bl urX = ombreLegere. blurY = 8; 

ombreLegere. angle = 45; 

1 isteDesFi It res. push (ombre Lege re) ; 
leLogo. filters = 1 isteDesFiltres; 

le Logo. addEvent Listener (Mouse Even t.MOUSE_DOWN,enfoncerBouton) ; 
le Logo. addEvent Listener (Mouse Even t.MOUSE_UP,relacherBouton) ; 

function enfoncerBouton(evt:MouseEvent) { 
leLogo.filters=nul 1 ; 
leLogo.x+=6; 
leLogo. y+=6; 



function rel a cherBouton(evt: MouseEvent) 
leLogo. filters = listeDesFil tres; 
leLogo.x-=6; 
leLogo. y-=6; 



) 

Vous observerez que nous devons importer la classe DropShadowFil ter(), comme nous 
l'avions fait avec une syntaxe de programmation sequentielle. Les deux variables 1 i ste- 
DesFiltres et ombreLegere sont de type private car elles ne servent qu'a l'interieur de 
notre classe. En dehors de cela, rien ne change. 



Remarque 

Nous aurions pu utiliser ce script pour definir une classe pour notre symbole. Consultez le fichier 
mai nFi 1 tre2 . as qui fonctionne avec f i 1 tres3Symbol eAS . f 1 a pour decouvrir les adaptations du code. 
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Animer un filtre 

Pour terminer ce developpement sur les filtres, nous allons decouvrir qu'il est possible 
d' animer un filtre pour obtenir un effet de mouvement de lumiere. 

Fichier de reference : Chapitre4/filtres4.fla 

import flash. filters. Bevel Filter; 

var 1 isteDesFil tres:Array = new ArrayO; 
var angle:Number; 
var distance:Number; 

var lueur:Bevel Filter = new Bevel Filter( ) ; 
lueur.qual ity=3; 
lueur. strength = 0.8; 

1 isteDes Filtres. push (lueur) ; 
laTache. filters = 1 isteDesFiltres; 

st age. addEvent Li stener(MouseEvent.MOUSE_MOVE,regler Lumiere) ; 

function reglerLumiere(evt:MouseEvent) { 

angle = (Math.atan2(129-mouseY, 258-mouseX)/Math.PI )*180; 
lueur. angle = angle; 

distance = Math.abs(129-mouseY)+Math.abs(258-mouseX) ; 
lueur. blurX = lueur. blurY = distance/10; 

1 isteDesFiltres = []; 

1 isteDes Filtres. push (lueur) ; 

1 aTache. filters = listeDesFil tres; 

} 

Les 12 premieres lignes du script ci-dessus sont identiques a celles des scripts que nous 
avons abordes precedemment ; nous ne reviendrons done pas sur ces explications. En 
revanche, essay ons de comprendre comment la lueur illumine 1' occurrence placee au centre 
de la scene (figure 4-12). 



J. 



Figure 4-12 

Le curseur de la souris de notre animation degage une lueur, a tel point qu 'en le deplacant, le bord de I 'occurrence 
le plus proche du curseur est eclaire par celui-ci. 
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• Nous utilisons, pour la premiere fois dans ce livre, l'evenement M0USE_M0VE. Precisons 
que la fonction de rappel intitulee reglerLumiereO ne sera executee qu'a partir du 
moment ou la souris sera en mouvement sur la scene. 

• Le code contenu dans la fonction se decompose en deux parties. Les trois dernieres 
lignes appliquent le nitre, comme nous l'avons deja vu au cours de ce developpement. 
Les trois premieres lignes permettent, elles, de calculer Tangle a utiliser pour la 
propriete angle de 1' instance lueur et la quantite de flou a appliquer au bord de cette 
meme occurrence, pour dormer une impression d'eloignement (diminution de T inten- 
sity de la lumiere). 

Vous noterez qu'exceptionnellement, le premier parametre de la fonction atan2() fait 
d'abord reference a la propriete mouseY et non mouseX. De plus, les valeurs 129 et 258 
correspondent a l'axe autour duquel la souris doit tourner pour calculer Tangle. 



La couleur 

Avant de vous apprendre a modifier la couleur d'une occurrence, essayons de comprendre 
comment fonctionne le codage de la couleur en hexadecimal. Si vous connaissez deja cette 
representation, passez les quelques pages qui vont suivre pour vous rendre au debut du 
developpement sur T affectation d'une couleur a une occurrence. 

Comprendre la couleur en hexadecimal 

Que signifie 0xFF12F3 ou #FF12F3 ? C'est une question que vous vous etes surement 
deja posee en voyant cette codification de couleur. Nous allons done expliciter cette 
representation, et vous vous rendrez compte qu'elle est finalement assez simple a utiliser. 

Cyan, magenta, jaune et noir 

Si vous travaillez dans le domaine des arts graphiques, vous avez certainement T habitude 
de travailler la couleur en quadrichromie, e'est-a-dire a base de cyan, magenta, jaune et 
noir. Le dosage de ces couleurs s'exprime en pourcentage. Ainsi, pour qualifier une 
couleur en CMJN, on Texprime sous la forme suivante : cyan 10 % - magenta 23 % - 
jaune 37 % - noir 4 %. Le melange des couleurs cyan, magenta et jaune dosees a 100 % 
permet d'obtenir theoriquement du noir. Ces couleurs sont constituees de pigments qu'on 
peut deposer sur une surface. 

Le dosage d'une couleur s'exprime en pourcentage, partant de 0, pour une absence de la 
couleur (ce qui laisse alors apparaitre la couleur du papier), a 100, pour un dosage maximal, 
recouvrant ainsi integralement la couleur du papier. Lorsque vous travaillez dans ce mode 
de couleur (CMJN), on parle de methode soustractive. 
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Rouge, vert, bleu 

En revanche, si vous travaillez dans le monde de la video, vous n'avez pas 1' habitude de 
manipuler les couleurs que nous venons d'evoquer, mais plutot le rouge, le vert et le bleu. 
Le dosage de ces couleurs ne s'exprime pas en pourcentage, mais sur une base de 256 valeurs 
allant de a 255. Ainsi, pour definir une couleur en RVB, on l'exprime sous la forme 
suivante : rouge 128 - vert - bleu 255. Le melange de ces trois couleurs dosees au maxi- 
mum (255) permet d'obtenir du blanc. Rappelons que les couleurs d'un televiseur ou 
d'un video projecteur sont obtenues grace a des rayons de lumieres. Lorsque vous travaillez 
dans ce mode de couleur (RVB), on parle de methode additive. 



Rappel 

Le noir et le blanc ne sont pas des couleurs, mais des valeurs de couleurs. 



100 



255 




128 



Rouge 
Vert 
Bleu 



■□ 



Figure 4-13 

Les deux modes de couleurs CMJN et RVB sont utilises respectivement dans le monde des arts graphiques 
et de la video. 

Vous aimeriez peut-etre comprendre pourquoi nous evoquons ces deux modes alors que 
nous nous appretons a presenter le codage de la couleur en hexadecimal ? II est important 
que vous sachiez des a present que cette representation se base sur le mode RVB. En 
observant la partie droite de la figure 4-13 et l'integralite de la figure 4-14, vous pouvez 
constater qu'il s'agit des memes degrades de couleurs (meme si vous les voyez en niveaux 
de gris). En revanche, vous observerez que la graduation ne varie pas de a 255, mais de 
00 a FE C'est cette representation (utilisation de chiffres et de lettres pour representer un 
nombre), appelee notation hexadecimale, que nous allons vous presenter. 



oo 



FF 



8F 



Rouge 
Vert 
Bleu 
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Figure 4-14 

Le codage d'une couleur en hexadecimal se base sur toujour s sur 256 valeurs par couche mais utilise 
une representation hexadecimale des nombres. 
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Avant de vous expliquer comment lire une couleur en hexadecimal, revenons sur des notions 
que vous possedez deja. Le tableau de la figure 4-15 contient des valeurs que vous manipulez 
depuis votre plus tendre enfance. Nous avons alterne la coloration des lignes paires et 
impaires pour vous demontrer qu'en les mettant bout a bout, nous obtiendrions une ligne 
comme celle que vous pouvez retrouver sur la figure 4-17. II s'agit de la notation en base 
10, dans laquelle nous avons besoin de dix chiffres pour representer les nombres. 

En hexadecimal, nous utilisons une base 16, c'est-a-dire qu'en plus des dix chiffres, nous 
ajoutons les lettres A, B, C, D, E et F. En effet, comme il n'existe pas d'autres chiffres 
pour compter, il a fallu utiliser des signes que nous connaissions deja. C'est pourquoi les 
lettres ont ete retenues pour faire partie de la representation d'une nouvelle base. 

A l'ecole, dans les classes primaires, l'echelle des notes s'etend generalement de a 10 
car les maitres des ecoles n'ont pas besoin d'utiliser plus de valeurs. Au college puis au 
lycee, il est necessaire de pouvoir nuancer davantage revaluation, les notes s'etalent 
done de a 20. Ces deux exemples nous permettent de comprendre que plus une echelle 
ou une graduation est etendue, plus elle offre de possibilites de nuances, de variations. 
Ainsi, si vous deviez remplir chaque cellule du tableau de la figure 4-15 avec une couleur 
differente, puis effectuer la meme operation pour le tableau de la figure 4-16, vous 
obtiendriez bien plus de nuances dans le tableau utilisant les valeurs en hexadecimal. 
L'utilisation d'une notation hexadecimale permet d'obtenir, avec deux « chiffres », 
256 couleurs, alors que nous n'en aurions que 100 en base 10. . . 



123456789 



Figure 4-15 

Les nombres de a 99 exprimes en base 10. 
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Le tableau de la figure 4-16 est obtenu comme celui de la figure 4-15, en combinant les 
chiffres ou les lettres qui figurent a gauche de chaque ligne et en haut de chaque colonne. 
Si nous construisons maintenant deux echelles contenant toutes les lignes des tableaux 
des figures 4-16 et 4-15, nous voyons a quel point la notation hexadecimale permet de 
representer un plus grand nombre de valeurs avec la meme quantite de caracteres. 
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Figure 4-16 

Les nombres hexadecimaux (en base 16) de 00 a FF. 
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Figure 4-17 

Ces trois echelles de valeurs representent toutes un dosage, une mesure. Une notation sur 20 est comparable 
a une notation sur 10 : dans les deux cas, est la plus mauvaise note alors que 20 ou 10 est la note la plus forte. 
Ce qui change, c 'est la precision de la notation ; 10/20 est la meme note que 5/10. On comprend alors que, 
dans notre figure, les valeurs 100, 255 et FF representent toutes un meme dosage maximum. 



Voyons maintenant comment lire une valeur en hexadecimal. Gardez tout d'abord a l'esprit 
cette premiere evidence : sur une graduation en base 10, le correspond a la plus petite 
valeur et le 9 a la plus grande. Dites-vous a present, en vous aidant pour cela de la figure 4-16, 
que la plus petite valeur sur une graduation en base 16 est et la plus grande est F. 

Prenons l'exemple suivant : Luna, 1 1 ans, a une sceur Marine de 19 ans. Luna s'adresse a 
son grand-pere, qui a 91 ans, et lui dit : « Tu sais papi, Marine, elle est vieille. Elle a de 
la chance, elle peut sortir avec ses copines, elle a une voiture, un amoureux... Elle est 
vieille ! » Le grand-pere de Marine, devant la naivete de sa petite fille, ne peut que lui 
repondre : « Oui, tu as raison. Elle est vieille ! ». Revenons maintenant sur les ages des 
trois personnages de notre histoire : 11, 19 et 91 ans. Bien que les ages du grand-pere et 
de Marine soient tous les deux composes des memes chiffres, 1 et 9, le resultat n'est pas 
du tout le meme car l'ordre des chiffres a de l'importance. 



Controler une occurrence et naviguer sur la scene 

Chapitre 4 

Nous constatons en effet que les ages de Luna et Marine se trouvent tous les deux sur la 
deuxieme ligne du tableau de la figure 4-15, alors que celui de leur papi se trouve dans la 
derniere ligne. 

En conclusion, les chiffres en deuxieme position dans les ages de Luna et de Marine (1 et 
9) permettent de les situer chacune dans la premiere dizaine, mais les ages restent au 
debut d'une echelle allant de a 99, alors que le grand-pere se trouve a la fin de l'echelle, 
me me s'il est au debut de la derniere dizaine du tableau ! Le premier chiffre d'un nombre 
a done un poids beaucoup plus important. C'est exactement pareil dans la notation hexa- 
decimale. 

Ainsi, lorsque vous voyez une couleur sous la forme FFFFOO, comprenez tout d'abord 
qu'il s'agit d'un codage de couleur en hexadecimal qui s'appuie sur le mode RVB (sous 
la forme RRVVBB plus precisement). Ainsi au lieu d'ecrire 255 255 0, on ecrit FF FF 00. 
En collant les valeurs, on obtient le nombre FFFFOO. Mais pourquoi ce double F ? Regardez 
le tableau de la figure 4-16, vous constaterez que la valeur FF correspond a la 256 e valeur 
du tableau, c'est a dire le nombre 255 en base 10 (la premiere valeur du tableau est 0, la 
derniere 255). 

Essayez maintenant les deux couleurs suivantes codees en hexadecimal : 0FEFF0 et 
10F0EF Vous pouvez constater qu'elles sont quasiment identiques ; pour comprendre 
pourquoi, repondez a ces trois questions : 

• Quelle valeur se trouve apres OF en hexadecimal ? 

• Quelle valeur se trouve apres EF en hexadecimal ? 

• Quelle valeur se trouve avant F0 en hexadecimal ? 

Si vous concatenez toutes vos reponses, vous obtenez la deuxieme couleur : 10F0EF 
(voir la partie droite de la figure 4-19 pour comprendre comment la lire). 

Peut-etre ne comprenez-vous toujours pas. Rappelez-vous notre avant-dernier propos : 
seul le premier des deux chiffres de chaque paire est important. L'exemple de gauche de 
la figure 4-19 vous demontre que la couleur codee par cette valeur hexadecimale corres- 
pond a un magenta. F11FED signifie en effet rouge Fl, vert IF et bleu ED. On ne retient 
que les premiers chiffres de chaque couleur, e'est-a-dire F, 1 et E. Sur une echelle allant 
de a F, la valeur F du rouge se trouve a la fin, cela signifie done beaucoup de rouge. 
Toujours sur une echelle de a F, la valeur 1 du vert se trouve au debut, cela signifie done 
peu de vert. Et enfin, en appliquant le meme raisonnement a la composante bleue nous 
deduisons que la couleur finale contient beaucoup de bleu. 



FF 



Figure 4-18 

Ces deux valeurs, bien que composees des mimes chiffres, ne se trouvent pas au meme endroit sur une echelle 
en hexadecimal (de a F) ; de meme pour les nombre 19 et 91 sur une echelle de a 99 en base 10. 
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F11FED 10F0EF 

F11FED 10F0EF 

F11FE 1 F E 

F11FED 1 F E 

r F 1 E i r i r E i 

255 255 255 255 

Figure 4-19 

Void comment faciliter la lecture d'une couleur hexadecimale. Evidemment nous simplifions lorsque 
nous associons a E la valeur 255 et 1 la valeur 0. 



Mais comment peut-on savoir que du rouge additionne a du bleu permet d'obtenir du 
magenta, ou que du rouge additionne a du vert permet d'obtenir du jaune ? 

Le schema de la figure 4-20 vous montre que pour avoir une idee de la couleur obtenue a 
partir d'un codage RVB, il suffit de consulter la lettre C (cyan), M (magenta) ou J (jaune) 
qui ne se trouve pas en face des deux lettres a additionner dans 1' autre mode. Ainsi, pour 
obtenir du cyan, il faut utiliser du vert et du bleu. Cela marche egalement dans 1' autre 
sens : pour obtenir du rouge, il faut melanger du magenta et du jaune. 

Fi9Ue42 ° D V# O D \/ D 

Une couleur dans un mode \\ V t# Wl V tj 

s 'obtient en ajoutant les j-^**-** *^^-^_^_^ 

deux couleurs opposees j^_ - ^j- ~ ' " 

de V autre mode. f IWI J f IWI J 

Si la premiere lecture de ces quelques pages vous a parue un peu difficile, nous vous 
conseillons de ne pas relire tout de suite ces quelques explications, mais d'effectuer une 
deuxieme lecture dans quelques minutes. 

Affectation d'une couleur a une occurrence 

Fichier de reference : Chapitre4/couleur.fla 

L' application d'une couleur a une instance est nettement plus facile que la comprehension du 
mode de calcul d'une couleur en hexadecimal, mais elle n'est tout de meme plus aussi 
simple qu'en AS1/AS2. 



Remarque 

Pour celles et ceux qui utilisaient deja la classe ColorTransformO en AS1/AS2 , il n'y a pas de change- 
ment en AS3. 
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Considerons tout de suite l'exemple suivant : 

Ivar modi fCouleur: Col orTransform = pastillel. transform. colorTransform; 
modifCouleur. color = 0x008800; 
pastillel. transform. colorTransform = modifCouleur; 

La premiere ligne de ce script a pour but de creer un objet de type Col orTransform qui stocke 
une des informations d'ordre colorimetrique obtenue a l'aide de la propriete col orTransform. 
Dans notre exemple, nous nous servons de l'occurrence pastillel pour recuperer ses 
attributs, mais nous aurions pu partir de zero. 

La deuxieme ligne fait appel a la propriete color pour affecter une couleur a 1' instance 

modifCoul eur. 

La troisieme ligne permet, quant a elle, d'appliquer concretement la couleur a l'occurrence 
intitulee pasti 1 1 el qui se trouve sur la scene. 

Comme nous venons de l'evoquer, nous pourrions aussi creer un objet directement en 
instanciant la classe Col orTransform( ). 

Ivar modifCouleur:ColorTransform = new ColorTransfornU ) ; 
modifCouleur. color = 0x008800; 
pastillel. transform. colorTransform = modifCouleur; 

Quelle que soit la methode que vous utiliserez, que vous recuperiez les informations 
d'une occurrence existante ou que vous instanciez la classe ColorTransformO, vous devrez 
toujours definir la couleur a attribuer en faisant appel a la propriete col or et terminer votre 
processus par la methode colorTransformO. 



Rendre une occurrence mobile 

Avant de vous presenter le code qui permet de rendre une occurrence mobile, distinguons 
des a present les deux cas suivants : 

• Une occurrence peut etre rendue mobile au lancement de 1' animation, de facon auto- 
matique, sans que l'utilisateur n' ait a cliquer a un quelconque endroit de la scene. C'est 
notamment le cas pour un curseur personnalise ou une infobulle qui suit le curseur : 
aucun gestionnaire d'evenement n'est alors necessaire, une simple ligne d'instruction 
suffit. 

• Une occurrence peut etre mobile uniquement si l'utilisateur la saisit pour la deplacer 
avec la souris. 



Remarque 

II est impossible de rendre plusieurs occurrences mobiles avec la methode startDrag( ). Si vous aviez 
un tel besoin, il faudrait utiliser I'evenement ENTER„FRAME ou faire appel a la classe Timer ( ) pour executer en 
continu le deplacement d'une ou plusieurs occurrences (collees au curseur de la souris). 
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Mobilite automatique 

Fichier de reference : Chapitre4/draganddropl.f"la 

Comme nous l'avons presente au debut de ce livre, lorsque vous devez executer une 
action automatiquement au lancement d'une animation, il faut votre code sur une image-cle, 
en-dehors de tout gestionnaire d'evenement, ou dans le constructeur de la classe de votre 
document. Quel que soit le mode de programmation que vous retenez, voici 1' unique 
ligne d' instruction qui permet de rendre une occurrence mobile. 

monCurseur.startDrag(true) ; 

Dans notre exemple, monCurseur correspond au nom d'une occurrence sur la scene. Le 
parametre true est necessaire lorsque vous rendez une occurrence mobile automatique- 
ment. Si vous le reglez a f al se, valeur par defaut si vous ne precisez rien, l'occurrence ne 
se retrouvera pas fixee au curseur de votre souris. 

Masquer le curseur 

Dans certains cas, vous aurez besoin de masquer le curseur de votre souris. Ajoutez alors 
simplement la ligne d 'instruction ci-dessous. 

Mouse. hide( ) ; 

Pour reafficher le curseur, utilisez la methode show( ). 

Mouse. show( ) ; 

Mobilite manuelle ou glisser-deposer 

Fichier de reference : Chapitre4/draganddropl.fla 

Lorsque vous aurez besoin d'effectuer un glisser-deposer (drag and drop) d'une occurrence 
sur la scene, vous devrez la rendre mobile. Pour cela, analysons tout d'abord les etapes 
necessaires a la programmation de cette operation. 

1. Vous devez maintenir le clic sur une occurrence. 

2. Vous devez rendre l'occurrence mobile. 

3. Vous devez relacher le bouton de votre souris pour relacher l'occurrence. 

En ActionScript, nous devons traduire et decouper notre script de la meme facon : 

1. Definir un objet d'ecoute avec l'evenement M0USE_D0WN. 

2. Faire appel a la methode startDragt ) dans la fonction de rappel de l'objet d'ecoute 
ci-dessus. 

3. Definir un objet d'ecoute avec l'evenement MOUSEJJP. 
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Voici le code correspondant : 



carte. addEventListener(MouseEvent.MOUSE_DOWN,carteMobile) ; 
carte.addEventListener(MouseEvent.MOUSE_UP,carteArretee) ; 

function carteMobile(evt:Event) { 

carte.startDrag( false) ; 
} 
function carteArretee(evt:Event) ( 

stopDrag( ) ; 



Si vous avez compris la manipulation des gestionnaires d'evenements, vous pouvez constater 
que la structure de ce script est logique. Dans ce cas, essayons d'aller plus loin et d'ajouter 
une notion supplemental : effectuer une action lors du deplacement de 1' occurrence. 



Remarque 

Si vous omettez le parametre f al se de la methode startDragt ), vous constaterez que la carte est bien 
rendue mobile, et que son point d'alignement ne vient pas se coller au curseur de votre souris (comme 
nous I'avons vu dans le cas d'une occurrence rendue automatiquement mobile). La valeur false ne 
s'avere done pas indispensable et vous ne devez surtout pas utiliser la valeur true (sauf si vous souhaitez 
replacer le point d'alignement d'une occurrence sur I'extremite du curseur). 



Executer une action lors du mouvement d'une occurrence 

Fichier de reference : Chapitre4/draganddrop2.fla 



Situons notre exemple dans un contexte 

Pour vous expliquer cette notion, prenons I'exemple d'une occurrence (un carre orange) dont la transparence 
va dependre de la position d'une autre. Plus nous allons deplacer la carte a jouer de notre exemple a 
droite de la scene, plus le carre orange sera opaque. 



La technique est extremement simple car il sufht d'ajouter un gestionnaire d'evenement 
qui fait appel a la constante MOUSEJIOvE. En revanche, il est important de comprendre 
P imbrication du code. 

A quel endroit du script allez-vous ajouter un ecouteur ? Dans la mesure ou vous allez 
devoir cliquer sur une occurrence avant de pouvoir la deplacer, nous allons done ajouter 
la ligne d'instruction ci-dessous dans la fonction de rappel de Pecouteur qui contient la 
constante M0USE_D0WN. 

carte.addEventListener(MouseEvent.MOUSE_MOVE,actionPendantMouvement) ; 

Vous obtenez ainsi le code suivant : 

function carteMobile(evt:Event) { 

carte. startDrag( ) ; 

carte. add Event Li stener(MouseEvent.MOUSE_MOvE, act i on PendantMouvement) ; 
} 
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Lorsque vous relacherez le bouton de la souris, il faudra par contre penser a retirer/desactiver 
votre ecouteur. 

function carteArretee(evt : Event) { 

stopDrag( ) ; 

carte. remove Event Li stener(MouseEvent.MOUSE_MOVE, act i on PendantMouvement) ; 
} 

Voici le script complet, comprenant notamment la fonction de rappel intitulee action- 
PendantMouvementt ). 

detecteur. a lpha=carte.x/500; 

carte. addEventListener(MouseEvent.MOUSE_DOWN,carteMobile) ; 
carte.addEventl_istener(MouseEvent .MOUSE_UP,carteArretee) ; 

function carteMobile(evt: Event) { 

carte. startDrag( ) ; 

carte. addEvent Listener (Mouse Event. M0USE_M0VE, act ion PendantMouvement) ; 
} 
function carteArretee(evt: Event) { 

stopDrag( ) ; 

carte. remove Event Li stener(MouseEvent.MOUSE_MOVE, act ion PendantMouvement) ; 
} 

function actionPendantMouvement(evt:Event) ( 

detecteur.alpha=carte.x/500; 
} 



Remarque 

Lefichier draganddrop2.fla ne contient pas tout a fait le meme code que celui presente ici, car nous 
gerons le probleme du curseur qui ne se trouve plus au-dessus de I'occurrence au moment ou le bouton 
de la souris est relache. 



A la premiere ligne du script, nous commencons par regler la transparence de I'occurrence 
detecteur afin qu'elle ne subisse pas une variation soudaine au lancement de l'animation. 

Ensuite, l'unique ligne d'instruction de la fonction actionPendantMouvementt ) est chargee 
de regler l'opacite de I'occurrence detecteur a chaque mouvement de souris. 

Precisons que l'evenement M0USE_M0VE s'averera indispensable lorsque vous realiserez des 
variateurs (consultez la section suivante pour decouvrir la technique de realisation d'un 
variateur). 

II est tres important de penser a retirer/desactiver un ecouteur lorsqu'il n'est plus utile. 
C'est pourquoi nous ajoutons la fonction removeListenerO dans la fonction de rappel 

carteArretee( ). 
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Contraindre le deplacement dans une zone 

Dans certains cas, il est necessaire de contraindre le deplacement d'une occurrence dans 
une zone precise, l'exemple le plus frequent etant le cas d'un variateur (figure 4-21). 




<• 



Figure 4-21 

Un variateur n 'est ni plus ni moins qu 'une occurrence rendue mobile dans une zone contrainte de zero pixel 
de hauteur ou de largeur. 



Remarque 

II est vrai qu'un composant intitule Slider existe deja dans interface de Flash, mais il se caractirise par 
un graphisme tres froid propre aux composants. Nous souhaitons done creer notre propre variateur. 



Avant de decouvrir le code necessaire a la realisation d'un variateur personnalise, 
essayons de comprendre comment fonctionne la contrainte d'un deplacement. 

Nous allons utiliser la methode startDrag( ), mais nous devons d'abord specifier une zone 
de contrainte en-dehors de laquelle l'occurrence ne pourra pas sortir. 

var zoneDeContrainte:Rectangle = new Rectangle(60,80,170,130) ; 
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Figure 4-22 

La zone de contrainte se definit en precisant la position des bords gauche et superieur a ne pas depasser ainsi que 
la largeur et la hauteur. 



Nous pouvons ensuite utiliser l'objet zoneDeContrainte pour definir le deuxieme parametre 
attendu de la methode startDrag( ). 

variateur.startDragt false, zoneDeContrainte) j 
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Dans ce premier exemple, l'occurrence va ri ateur ne peut bouger que dans la zone definie 
en pointilles sur la copie d'ecran de la figure 4-22. Pour etre tres precis, nous devons 
ajouter que c'est en fait le point d'accrochage de l'occurrence qui ne peut pas sortir de la 
zone, ce qui signifie que la moitie de l'instance peut se trouver a l'exterieur comme le montre 
la copie d'ecran de la figure 4-23. 

Figure 4-23 

C'est le point d'alignement, ; 

ou point d'accrochage, d'une 
occurrence qui est contraint a ne 
pas sortir d'une zone de contrainte 
et non les bords de l'occurrence 
elle-meme. 



Pour pallier ce probleme, il suffit de revoir les quatre valeurs de definition de l'instance 
de la classe RectangleO a la baisse. Reprenons des valeurs de la figure 4-22 en sachant 
que l'occurrence (le rond bleu fonce) mesure 30 pixels de diametre, soit 15 pixels de rayon. 
Voici les nouvelles valeurs : 

var zoneDeContrainte: Rectangle = new Rectangle(75,95,155,115) ; 

Nous avons tout simplement ajoute 15 pixels aux deux premieres valeurs et soustrait 
15 pixels a la largeur et la hauteur. 

Revenons a notre objectif initial qui est de concevoir un variateur. Nous devons definir 
une hauteur de contrainte de pixel pour que l'occurrence ne puisse plus se deplacer 
verticalement, mais uniquement horizontalement. 

Fichier de reference : Chapitre4/draganddrop3.fla 

var zoneLimite:Rectangle = new Rectangle(55, 237, 173,0) ; 

variateur.addEventListener(MouseEvent.MOUSE_DOWN,variateurMobile) ; 
va r i ateur. add Event Li stener(MouseEvent .MOUSEJJP, van' ateurArrete) ; 

function variateurMobile(evt: Event) { 

vari ateur. startDrag(false,zoneLi mite) ; 
} 
function variateurArrete(evt: Event) { 

stopDrag( ) ; 
} 

Vous retrouverez ce script dans le fichier draganddrop4.fla , dans lequel nous avons 
ajoute quelques lignes de code pour qu'une occurrence change de faille au moment ou le 
variateur est deplace. Nous gerons egalement le probleme aborde dans le developpement 
suivant (M0USE_UP_0UTSIDE). 
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Probleme du MOUSE_UP_OUTSIDE ? 

Lorsque vous relacherez le bouton de la souris au cours d'un glisser-deposer alors que le 
curseur se trouve encore au-dessus de l'occurrence que vous venez de deplacer, il n'y 
aura aucun probleme. En revanche, si le curseur ne se trouve plus sur l'occurrence, pour 
differentes raisons, au moment ou vous relacherez le bouton de la souris, la mobilite de 
l'occurrence sera toujours active : vous ne pourrez alors plus l'annuler. 



Explications 

II faut simplement comprendre qu'en ayant relache le bouton de la souris alors que le curseur n'etait plus 
sur l'occurrence rendue mobile, I'evenement MOUSEJJP ne s'est pas produit. 



Fichier de reference : Chapitre4/draganddrop4.fla 

Nous allons done adapter notre script de la facon suivante : 

var zonel_imite:Rectangle = new Rectangle(55, 237, 173,0) ; 

variateur.addEventl_istener(MouseEvent.MOUSE_DOWN,variateurMobile) ; 
variateur.addEventListener(MouseEvent.MOUSE_UP,variateurArrete) ; 

function variateurMobile(evt:Event) { 

stage. add Event Li stener(MouseEvent.MOUSE_UP,variateurArrete) ; 

variateur.startDrag(false,zoneLimite) ; 
} 
function variateurArrete(evt:Event) { 

stopDragt ) ; 

stage. removeEventl_istener(MouseEvent.MOUSE_UP,variateurArrete) ; 
} 

Si vous observez attentivement ce code, vous constaterez que nous avons ajoute deux 
lignes d' instructions. La premiere sert a detecter le relachement du bouton de souris par 
l'utilisateur quelle que soit la position de la souris. 



Rappel 

Nous vous rappelons que la propriete stage d'une occurrence fait reference a la scene de I'animation. 



stage.addEventl_istener(MouseEvent.MOUSE_UP,variateurArrete) ; 

La deuxieme sert, en revanche, a enlever l'ecouteur que nous avons declare dans la 
fonction variateurMobile( ). 



Message de I'auteur 

Au moment de I'ecriture de ce livre, e'est la seule solution que j'ai trouvee pour pallier I'absence de gestion 
de I'evenement M0USE_UP_0UTSIDE. Cette technique presente tout de meme I'inconvenient de declen- 
cher les fonctions de rappel des occurrences sur lesquelles vous relacherez votre die si I'evenement 
MOUSEJJP est gere. 
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Verifier /'emplacement de /'occurrence 

Lorsque vous effectuerez un glisser-deposer d'une occurrence sur la scene, vous souhai- 
terez peut-etre effectuer un test au moment du relachement pour verifier sa position. 
Placez dans ce cas un test dans la fonction de rappel de l'ecouteur qui gere l'evenement 
MOUSEJJP. Voici un exemple : 

function pionRelache(evt: Event) { 

stopDrag( ) ; 

if (pion.x>180) pion.x=55; 
} 



Tester la collision entre deux occurrences 

Nous venons d'evoquer, dans le developpement precedent, la possibility d'evaluer la 
position d'une occurrence sur la scene. Dans certains cas, il sera plus facile de tester 
1' intersection de deux occurrences. 

Pour cela, vous devez utiliser la methode hi tTestObject( ) en utilisant la syntaxe suivante : 

nomduneoccurrence. hi tTestObjecttnomduneaut reoccurrence) ; 

L' execution de cette ligne d'instruction a pour renvoie la valeur true ou f al se. 



L'expression « renvoyer » 

Le verbe renvoyer est utilise en programmation pour exprimer le fait qu'une fonction peut afficher ou trans- 
mettre une valeur. Dans le cas present, une fonction trace( ) sert a renvoyer ou afficher dans la fenetre 
Sortie ce qu'elle contient entre parentheses. 

La fonction trace( 12+35) renvoie la valeur 47. Vous decouvrirez, dans certaines fonctions, le terme 
return qui permet de renvoyer la valeur qui suit ce mot-cle. 



Pour tester cette methode, positionnez deux occurrences sur la scene, a cheval l'une sur 
l'autre. Nommez-les piecel et piece2 et saisissez la ligne d'instruction ci-dessous : 

trace(piecel.hitTest0bject(piece2)) ; 

Au moment de la previsualisation de votre animation (Ctrl-Entree sur Windows ou 
Commande -Entree sur Mac) la fenetre Sortie de Flash affiche le mot true. 

Fermez a present la fenetre de previsualisation pour pouvoir separer les deux occurrences 
et publiez a nouveau votre animation. Cette fois-ci, le mot f al se s'affiche dans la fenetre 
Sortie. Cela demontre bien que nous pouvons utiliser cette ligne d'instruction dans un 
test conditionnel avec if(). Consul tez eventuellement le chapitre 9 pour apprendre a 
ecrire des tests dans un programme. 

Dans l'exemple ci-dessous, nous allons faire rouler une balle en partant de la gauche de 
la scene pour aller vers la droite (figure 4-24). Une occurrence, symbolisant un mur, se 
trouve au milieu de la scene. Nous allons tester une eventuelle collision entre ces deux 
occurrences pour pouvoir interrompre le mouvement le cas echeant. 
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Figure 4-24 

Lorsque I 'occurrence representee par la balle va entrer en intersection avec le mur (represente par le trait 
vertical), le deplacement de la balle va etre interrompu. 



Fichier de reference : Chapitre4/hittestl.fla 

balle.addEveritl_istener(Event.ENTER_FRAME,avancerBal le) ; 

function avancerBal le(evt:Event) ( 
bal le.x=bal le.x+3; 
if (balle. hitTestObject(mur) ) { 
balle. removeEven t Li stener( Event. ENTER_FRAME, avancerBal le) ; 



Abordons un deuxieme exemple un peu plus complexe, mais plus representatif de notre 
problematique. Prenons une occurrence que nous souhaitons deplacer sur la scene par 
glisser-deposer et pour laquelle nous voulons savoir, au moment ou nous la relachons, si 
elle en touche une autre (figure 4-25). Voici, dans ce cas, le code a utiliser : 




Figure 4-25 

Au moment oil Vutilisateur reldche le bouton de la souris, un test est effectue pour determiner si les deux 
occurrences se touchent. 
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Fichier de reference : Chapitre4/hittest2.fla 

piecel .addEvent Listener (MouseEvent.MOUSE_DOWN, pi eceMobile) ; 
piecel .add Event Li stener(MouseEvent.MOUSE_UP, piece Fixe) ; 

function pieceMobile(evt:MouseEvent) { 

evt.currentTarget.startDragt ) ; 
} 

function pieceFixe(evt:MouseEvent) { 
stopDragO ; 

if (evt.currentTarget.hitTestObject(zoneRel ache) ) { 
evt.currentTarget.x=zoneRelache.x; 
evt.currentTarget.y=zoneRelache.y ; 

piecel.removeEventListener(MouseEvent.MOUSE_DOWN,pieceMobile) ; 
} 
} 



Remarque 

Si vous ne savez pas gerer le glisser-deposer d'une occurrence sur la scene, consultez le developpement 
precedent dedie a cette technique avant de poursuivre la lecture des lignes qui vont suivre. 



Observez bien la fonction pieceFixeO dans laquelle nous avons effectue un test qui 
detecte une eventuelle collision entre l'occurrence qui fait l'objet du deplacement 
(evt.currentTarget) et une autre intitulee zoneRelache. Si tel est le cas, nous placons preci- 
sement l'occurrence relachee aux memes coordonnees x et y de l'instance zoneRelache. 

Lorsque l'occurrence est a sa place, nous ne souhaitons plus qu'elle puisse etre deplacee 
a nouveau. Nous terminons done le script par une deactivation de l'ecouteur qui fait 
appel a l'evenement M0USE_D0WN. 



Remarque 

Si vous ne savez pas encore effectuer une boucle en programmation avec un for( ), n'abordez pas ce 
troisieme exemple et reprenez-le lorsque vous aurez lu le chapitre 10. 



Pour ce troisieme et dernier exemple, nous allons chercher a vous expliquer comment le 
nom de l'instance figurant dans les parentheses de la fonction hi tTest( ) doit etre ecrit s'il 
est amene a changer. En parcourant rapidement le script ci-dessous, vous decouvrirez 
que nous avons effectue une boucle pour placer plusieurs instances sur la scene. Nous ne 
pouvons done pas utiliser la meme reference, aussi bien pour le nom d'occurrence place 
avant la fonction que pour celui situe apres. 

Fichier de reference : Chapitre4/hittest3.fla 

for (var i:Number=0; i<=10; i++) { 

var unPionrJeton = new JetonO; 

var uneZoneDeRel ache:ZoneDeRelache = new ZoneDeRelachet ) ; 

unPion.addEventl_istener(MouseEvent.MOUSE_DOWN,pieceMobile) ; 
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un Pi on. addEven t Listener (Mouse Event. M0USE_UP, piece Fixe) ; 

unPion.x=50+(i*40); 
unPion.y=50; 
addChi ld(unPion) ; 

uneZoneDeRelache. x=50+(i*40) ; 
uneZoneDeRel ache.y=150; 
addChild(uneZoneDeRel ache) ; 

unPion.nomCible = uneZoneDeRelache; 
} 

function pieceMobile(evt:MouseEvent) ( 

evt.currentTarget.startDrag( ) ; 
} 

function pieceFixe(evt:MouseEvent) { 
stopDragt ) ; 

if (evt.currentTarget.hitTestObject(evt.currentTarget.nomCible) ) { 
evt .currentTarget.x=evt.currentTarget.nomCible.x; 
evt.currentTarget.y=evt.currentTarget.nomCible.y ; 

evt .currentTarget.removeEventListener(MouseEvent.MOUSE_DOWN,pieceMobile) ; 
} 
} 

La cle pour comprendre ce script reside dans les premieres lignes et dans celle qui 
contient le code unPion.nomCible = uneZoneDeRelache. 

Avant d'aller plus loin dans notre analyse, voici ce que le script ci-dessus nous permet 
d'obtenir sur la scene. 




Figure 4-26 

Toutes les occurrences ont ete placees dynamiquement. 



Pour placer ces 1 1 occurrences sur la scene, nous avons effectue une boucle et charge 
dynamiquement deux symboles. 
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Rappelons que le chargement d'un symbole est effectue de la facon suivante : 

1. Cliquez droit sur un symbole dans la bibliotheque, selectionnez la commande 
Liaison... et cochez la case Exporter pour ActionScript (figure 4-27). Donnez alors 
un nom de classe qui ne contient ni caracteres speciaux ou accentues ni espace. Nous 
vous conseillons, en revanche, de placer une majuscule en debut de nom. 

Propriete:. de liaison 



Idenilflant: [~ 



Classe : Jeion 



Classe de base : flasri.displav.MovieClip 



]0IZ] ( Annirier ) 
^00 



Liaison : g Exporter pour ActionScript 

Q Exporter pour le partage a I'execulion 
S Exporter dans la premiere image 

importer pour le partake a I'execution 



Figure 4-27 

Pour placer un symbole sur la scene, il doit posseder un nom de classe. 

2. Lorsque vous avez defini un nom de classe, il ne vous reste plus qu'a placer ce symbole 
tel que nous l'avons fait aux lignes 3 et 4. 

Pourquoi avons-nous demande I'execution de la ligne unPi on . nomCi bl e = uneZoneDeRel ache ? 

Rappelons que l'objectif de notre animation est de positionner une occurrence a un 
emplacement precis. A chaque iteration de la boucle, nous placons done un symbole 
representant le pion et un autre representant 1' emplacement de la depose du pion. Un test 
de collision doit etre effectue entre ces deux occurrences, mais elles ne possedent pas de 
nom (en dehors de celui qui leur est donne par defaut : instancel, instance2, etc.). Nous 
definissons done pour chaque occurrence de la classe PionO, une propriete intitulee 
nomCi bl e qui memorise le nom par defaut de l'instance du symbole zoneDeRel ache. II ne nous 
reste alors plus qu' a effectuerun test de collision en faisant reference a evt.currentTarget 
dans la fonction de rappel et la propriete nomCible de evt.currentTarget. 

En definissant, dans l'instance de la classe Jeton, une propriete qui contient la reference 
de 1' occurrence a utiliser pour evaluer la collision, nous simplifions notre script, car nous 
n'avons ainsi pas besoin de gerer les noms des occurrences. 



Gerer les plans entre deux ou plusieurs occurrences 

Comme le montre ires bien la copie d'ecran de la figure 4-28, vos mises en pages presen- 
teront parfois des chevauchements d' occurrences. II est alors plus difficile de manipuler 
celles qui se trouvent en arriere-plan. Pour remedier a ce probleme, vous pouvez faire 
appel a la fonction setChildlndexO. 
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Figure 4-28 

Nous avons dispose trois cartes a jouer 
sur la scene, les unes sur les autres. 
Chacune d'entre elles va passer 
au premier plan si elle recoit un die. 




Chaque occurrence contenue sur la scene ou dans un conteneur d'objets d'affichage 
possede un numero d' index (un numero de plan ou de niveau) qui definit son ordre d'affi- 
chage. Ainsi, lorsque vous placez une premiere occurrence sur la scene, l'index lui est 
attribue. Si vous placez a present une deuxieme occurrence sur la scene (a cheval sur la 
premiere ou a cote), elle portera le numero d' index 1 et se trouvera au premier plan. 

Ni en ActionScript, ni a partir de 1' interface de Flash, vous ne pourrez definir un numero 
d' index qui ne soit pas consecutif a celui qui se trouve deja au premier plan. 



AS1/AS2 

En ActionScript 1 et 2, nous pouvions definir un plan d'occurrence eleve, ce qui avait pour effet de placer 
I'instance au premier plan, mais aussi et surtout de generer des trous dans la liste des numeros d'index 
des occurrences sur la scene. Cela n'est plus possible en AS3. 



Indexation des instances dans un conteneur d'objets d'affichage 

L'indexation des occurrences contenues dans un conteneur d'objets d'affichage rede- 
marre toujours a 0. 

Prenons l'exemple suivant pour mieux comprendre : imaginez que vous ayez trois conte- 
neurs d'objets d'affichage sur la scene (par exemple des occurrences de Clip qui contiennent 
un rectangle gris aux coins arrondis). Vous placez, a l'interieur de chacun d'entre eux, 
trois occurrences d'un symbole de votre bibliotheque ainsi qu'un texte statique. 



Figure 4-29 

L'index d'une occurrence 
est propre d chaque conteneur 
d'objets d'affichage. 



Symbole contgnant une forme : Rectangle au* coins arrondis 
Texte statique 
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Votre animation possedera done trois occurrences ayant comme numeros d'index 0, 1 et 
2 (les trois grands rectangles de la figure 4-29), mais chacune d'elles possedera des 
occurrences dont les numeros d'index debuteront a 0. Si nous cherchons a savoir quelle 
occurrence possede les index 0, 1, 2, 3 et 4, nous obtenons dans les trois cas le meme 
resultat : 




Pour cela, nous avons execute les scripts suivants 

I for ( var 1=0 ;i<grandl.numChildren;i++ ) { 
trace(grandl.getChildAt(i)); 
} 



et 



for ( var i=0 ;i<grand2.numChildren;i++ ) 

trace(grand2.getChildAt(i)); 
} 



et 



for ( var i=0 ;i<grand3.numChildren;i++ ) 

trace(grand3.getChildAt(i ) ) ; 
} 
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Figure 4-30 

Void le contenu du premier symbole. 



Si vous ajoutez ou supprimez une occurrence contenue dans un conteneur d'objets d'affi- 
chage, la renumerotation des index des occurrences se produira automatiquement. 
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Connaitre le nombre cooccurrences dans un conteneur d'objets 
d'affichage 

Nous allons tres rapidement avoir besoin de connaitre le nombre d' occurrences contenues 
sur la scene ou dans un conteneur d'objets d'affichage ; vous allez done devoir faire appel 
a la propriete numChi 1 dren. Son utilisation est tres simple car il suffit de saisir uniquement 
ce terme avec le nom du conteneur en prefixe (aucun prefixe n'est necessaire pour 
connaitre le nombre d' occurrences contenues sur la scene). Effectuez une mise en pages a 
base d'occurrences, de formes et de textes puis saisissez la ligne d'instruction ci-dessous. 

j trace(numChildren) ; 

Dans la fenetre Sortie, vous decouvrirez un nombre qui correspond au nombre d'occur- 
rences contenues sur la scene. 



Remarque 

Toutes les formes tracees a I'aide des outils de dessin qui n'ont pas ete transformers en symbole ne sont 
pas, par definition, des occurrences, mais elles sont tout de meme comptabilisees. 



Lorsque vous utiliserez la valeur renvoyee par cette propriete pour regler le niveau d'une 
occurrence, gardez toujours a l'esprit que le numero d'index de la premiere occurrence 
sur la scene ou dans un conteneur d'objets d'affichage porte le numero 0. De ce fait, 
1' occurrence qui se trouve au premier plan portera, par exemple, le numero d'index 6 s'il 
y a sept occurrences. 

Pour placer une occurrence au premier plan sur la scene, il faut done utiliser la ligne 
d'instruction suivante : 

setChildIndex(nomOccurrence,numChildren-l) ; 

La methode setChildlndexQ 

Revenons sur le fonctionnement de la methode setChildlndexO, qui est extremement 
simple (il suffit de preciser le nom de l'objet d'affichage que vous souhaitez placer sur la 
scene, comme une occurrence de type Clip, ainsi que son niveau, defini par un indice). 

setChildIndex(nom0ccurrence,3) ; 

Pour information, lorsque vous placez un symbole sur la scene, que ce soit manuellement 
par un glisser-deposer ou dynamiquement a I'aide de lignes d' instructions en Action- 
Script, la gestion des plans est automatique. La derniere occurrence placee sur la scene 
vient toujours se placer au premier plan, au-dessus de toutes les autres. 

A la lecture de l'unique ligne d'instruction ci-dessus, nous serions tentes de croire que 
cette action est simple mais, dans certains cas, elle peut s'averer plus complexe. Nous 
aborderons ce probleme dans le developpement suivant, Cibler une occurrence cliquee. 

Concentrons-nous d'abord sur un premier script qui permet de placer une carte a jouer au 
premier plan. Trois occurrences intitulees btl, bt2 et bt3 ont ete placees sur la scene (sous 
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les trois cartes de la figure 4-28) et lorsque nous cliquons sur l'une d'entre elles, elle se 
place au premier plan. 

Fichier de reference : Chapitre4/gestionplansl.f"la 

bt 1. add Event Listener (Mouse Event. M0USE_D0WN, premier PI an 1) 
bt2.addEventListener(MouseEvent.M0USE_D0WN,premierPlan2) 
bt3. add Event Listener (Mouse Event. M0USE_D0WN, premier PI an3) 

function premierPlanl(evt:MouseEvent) { 

setChildlndex(cartel.numChildren-l) ; 
} 
function premierPlan2(evt :MouseEvent) { 

setChildIndex(carte2,numChildren-l) ; 
} 
function premierPlan3(evt:MouseEvent) { 

setChildIndex(carte3,numChildren-l) ; 
} 

Comme vous pouvez le constater, ce script est simple, mais il pourrait s'averer tres rapi- 
dement fastidieux a ecrire si nous avions davantage d' occurrences a traiter. 

Passage au premier plan ou changement de plan d'une occurrence 

Que se produit-il lorsqu'une occurrence passe au premier plan ou change de plan ? La 
reponse a cette question est extremement importante et nous permet d'illustrer la rein- 
dexation automatique de toutes les occurrences d'un conteneur. L' animation suivante 
vous permet de verifier en images ce comportement. 

Fichier de reference : Chapitre4/gestionplans2.fla 

Aidez-vous de cette animation pour verifier en image les propos suivants : 

Sept occurrences se trouvent sur la scene. Elles sont indexees par defaut de a 6. Nous 
decidons de placer l'occurrence portant l'index 1 au niveau 4, en ecrivant l'appel 
setChildIndex(cartel,4). Les index de chaque occurrence avant et apres le changement 
de niveau sont presentes dans le tableau 4-2. 

Tableau 4-2 Index de chaque occurrence avant et apres le deplacement 
de l'occurrence Cartel au niveau 4 



Occurrence 


Index avant le changement de 


niveau 


Index apres le changement de niveau 


CarteO 










Cartel 


1 




4 


Carte2 


2 




1 


Carte3 


3 




2 


Carte4 


4 




3 


Carte5 


5 




5 


Carte6 


6 




6 
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Apres le deplacement de l'occurrence Cartel au niveau 4 : 

• L'occurrence qui se trouvait avant l'index 1 n'a pas change de place. 

• Les occurrences dont l'index etait superieur a 4 n'ont pas ete modifiees. 

Les occurrences situees entre les index 2 et 4 ont ete deplacees d'un niveau, comblant 
ainsi l'espace laisse vide dans la liste d'indexation par l'occurrence Cartel. 

A titre d'exemple, le tableau 4-3 presente les index de chaque occurrence avant et apres 
le deplacement de l'occurrence Carte4 au niveau 1. 

Tableau 4-3 Index de chaque occurrence avant et apres le deplacement 
de l'occurrence Carte4 au niveau 1 



Occurrence 


Index avant le changement de 


niveau 


Index apres le changement de niveau 


CarteO 










Cartel 


1 




2 


Carte2 


2 




3 


Carte3 


3 




4 


Carte4 


4 




1 


Carte5 


5 




5 


Carte6 


6 




6 



Cibler une occurrence cliquee 

Comme nous l'evoquions precedemment, il est parfois difficile de faire reference au nom 
d'un objet d'affichage lors de l'appel a la methode setChildIndex( ). 

Considerons le script ci-dessous etrappelons que le parametre evt.currentTarget permet 
de faire reference a l'occurrence cliquee. 

curseur. add Event Li stener(MouseEvent.CLICK,depl acerDroite) ; 
function deplacerDroite(evt:Event) { 

evt.currentTarget.x+=3; 
} 

Dans un premier temps, adaptons ce script pour pouvoir utiliser la methode setChi 1 dlndex( ) 
sans evt.currentTarget : 

curseur. add Event Li stener(MouseEvent.CLICK,depl acerDroite) ; 
function deplacerDroite(evt:Event) { 

setChildIndex(curseur,3) ; 
} 

Dans cet exemple, l'occurrence intitulee curseur vient se placer au niveau de l'index 3 
comme le montre la figure 4-31. Nous avons fait clairement reference au nom d'occur- 
rence curseur, mais pas a evt.currentTarget. 
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Figure 4-31 

L' occurrence situee en arriere-plan s' intitule curseur et se trouve a V index avant V execution du script. 
Elle se situe a V index 3 apres V execution du script. 



Reprenons a present le code initial en faisant appel a l'objet evt.currentTarget pour ne 
pas avoir a faire reference au nom d'une occurrence et ainsi pouvoir reutiliser la fonction 
de r appel. 

cur seur.addEvent Listener (Mouse Event. CLICK, depl ace rDroite) ; 
function deplacerDroiteCevt:Event) { 
setChildlndext evt.currentTarget, 3) ; 

} 

A la publication de 1' animation, nous obtenons un message d'erreur ! 



1118: Contrainte implicite d'une valeur du type statique Object vers un type 
peut-etre sans rapport fl ash.displ ay :Displ ayObject. 






Ce message d'erreur signifie que evt.currentTarget n'est pas un Displ ayObject, c'est-a-dire 
un type d'objet auquel s'attend la methode setChildIndex( ). Nous devons done modifier 
notre code de la facon suivante : 

cur seur.addEvent Listener (Mouse Event. CLICK, depl ace rDroite) ; 
function deplacerDroite(evt:Event) { 

setChildlndext Displ ayObject (evt.currentTarget) ,3) ; 
} 

L'ajout de la fonction Di spl ayObject( ) permet de convertir le type d'un objet en Di spl ayObject. 
Elle est done necessaire pour combiner evt.currentTarget et la methode setChildIndex( ). 



Information 

Essayez de tracer evt.currentTarget en executant la ligne d'instruction trace(evt.currentTar- 
get) et vous decouvrirez qu'il s'agit d'un objet de type MovieClip. II est surprenant de decouvrir qu'un 
MovieClip n'est pas, par defaut, un objet d'affichage. Rappelons peut-etre qu'un MovieClip possede une 
classe eponyme qui herite de la classe DisplayObjectContainer (qui herite elle-meme de la classe 
Displ ayObject). 



Voici un dernier exemple qui met en evidence 1' aspect pratique de ne disposer que d'une 
seule fonction pour plusieurs objets d'ecoute. 
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Fichier de reference : Chapitre4/gestionsplans3.fla 

cartel. add Event Li stener(MouseEvent.MOUSE_DOWN, premier PI an) 
ca rte2. add Event Li stener(MouseEvent.MOUSE_DOWN, premier PI an) 
ca rte3. add Event Li stener(MouseEvent.MOUSE_DOWN, premier PI an) 



function premierPl an(evt:MouseEvent) { 
setChildIndex(DisplayObjectContainer( evt.currentTarget) ,numChildren-l) 



Remarque 

Attention : afin de mieux pouvoir gerer les plans des occurrences, il est fortement conseille de les placer 
dans des instances de conteneur telles que des Sprite, par exemple. Consultez le chapitre 2 pour mieux 
comprendre ce dernier propos. 



Connaitre le numero d'index d'une occurrence 

Fichier de reference : Chapitre4/gestionsplans4.fla 

Vous aurez parfois besoin de connaitre le numero d'index d'une occurrence afin de 
pouvoir la manipuler. Vous devrez alors utiliser la methode getChildIndex( ) en precisant 
un nom d'objet d'affichage en parametre. 

L' exemple ci-dessous permet d'afficher sur la scene le numero d'index de l'occurrence 
sur laquelle on clique. L'affichage s'effectue dans un texte dont le nom d'instance est 

numerolndex. 

ca rtel. add Event Li stener(MouseEvent.MOUSE_DOWN, premier PI an) 
ca rte2. add Event Li stener(MouseEvent.MOUSE_DOWN, premier PI an) 
ca rte3. add Event Li stener(MouseEvent.MOUSE_DOWN, premier PI an) 

function premierPlan(evt:MouseEvent) { 

numerolndex. text = getChildIndex(DisplayObject(evt.currentTarget) ) .toString( ) ; 
} 

Vous observerez que la methode getChildlndexO s'attend egalement a un parametre de 
type DisplayObject. Nous devons done faire appel a la methode DisplayObjectO pour 
convertir le type de evt.currentTarget. 



Faire reference a une occurrence a partir de son index 

Rappelons tout d'abord que pour obtenir le nom d'une occurrence sur laquelle vous 
cliquez, il suffit de faire reference a la propriete name accessible a partir de la propriete 

currentTarget. 

ca rtel. add Event Li stener(MouseEvent.MOUSE_DOWN, premier PI an) ; 
function premierPlan(evt:MouseEvent) { 

trace (evt.currentTarget. name) ; 
} 
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Dans certains cas, vous aurez besoin de preciser le numero d'index pour rechercher ou 
faire reference a une occurrence ; vous utiliserez alors la methode getChildAt( ) en precisant 
un index. 

Faire reference au nom d'une occurrence par concatenation 

Lorsque vous souhaiterez faire reference a des occurrences par concatenation d'une chaine 
de caracteres et d'un nombre croissant, vous utiliserez la methode getChildByNameO. 
Dans l'exemple suivant, nous regions la transparence de plusieurs occurrences, intitulees 
cartel a cartelO, a l'aide d'une boucle en faisant appel a la methode getChildByNameO. 

Fichier de reference : Chapitre4/gestionsplans5.fla 

I for (var i :Number=l; i<=10; i++) { 
getChildByName("carte"+i ). alpha = 0.5; 

Le script est tres court car notre besoin est simple, mais si vous ne comprenez pas cette 
structure de code, consultez le chapitre 10 de ce livre qui traite de la boucle f or( ). 

Desactiver la detection d'evenement sur une occurrence 

Fichier de reference : Chap1tre4/desact1 veroccurrencel.fi a 

Lorsque vous souhaitez qu'une occurrence ne reagisse plus aux evenements de la souris, 
vous disposez de deux solutions : 

• Desactiver temporairement la capacite de cette occurrence a deceler un evenement de 
type souris avec la propriete mouseEnabled. 

• Annuler le gestionnaire d'evenement qui lui a ete attribue avec la methode remove- 
Eventl_istener( ). 

Abordons tout de suite un premier exemple qui montre comment rendre deux occurrences 
inactives apres un clic sur un interrupteur. 




Figure 4-32 

Les deux occurrences de la copie d'ecran de droite ne peuvent plus etre saisies pour etre deplacees car V interrupteur, 
a gauche de la scene, a ete abaisse. 
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Nous avons place sur la scene un interrupteur represente par un rectangle incline et deux 
pions. Ces derniers peuvent etre deplaces par glisser-deposer. 

Si vous cliquez sur 1' interrupteur, son echelle verticale (scaleY) bascule a -1, donnant ainsi 
l'impression qu'il s'abaisse. Par la meme occasion, nous rendons les pions insaisissables et 
legerement transparents. Si vous cliquez a nouveau sur 1' interrupteur, les pions redeviennent 
opaques et mobiles. 

declencheur.addEventl_istener(MouseEvent.CLICK,desacti verPions) ; 

function desactiverPions(evt:MouseEvent) { 
evt.currentTarget.scaleY*=-l ; 
if (evt.currentTarget.scaleY==-l) { 

pionl.mouseEnabled = false; 

pionl. alpha = 0.5; 

pion2.mouseEnabled = false; 

pion2. alpha = 0.5; 
} else { 

pionl.mouseEnabled = true; 

pionl. alpha = 1; 

pion2.mouseEnabled = true; 

pion2. alpha = 1; 
} 
} 

pionl.addEventl_istener(MouseEvent.MOUSE_DOWN,deplacerPion) ; 
pion2.addEventl_istener(MouseEvent.M0USE_D0WN,depl acerPion) ; 
pionl.addEventl_istener(MouseEvent.MOUSEJJP,fixerPion) ; 
pion2.addEventListener(MouseEvent.M0USE_UP,fixerPion) ; 

function deplacerPion(evt:MouseEvent) { 

evt.currentTarget.startDrag( ) ; 
} 

function f ixerPion(evt:MouseEvent) { 
stopDragt ) ; 



Remarque 

Si vous aviez davantage d'occurrences a gerer, il serait preferable d'utiliser une boucle f or( ) pour placer 
les pions sur la scene et d'ecrire ensuite les scripts de leurs comportements (lignes contenues dans 
I'instruction ifO). 



Lorsque nous regions la propriete mouseEnabled a false pour une occurrence donnee, les 
evenements souris se rapportant a cette derniere ne peuvent plus etre detectes. 
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Dans l'exemple suivant, nous souhaitons qu'une occurrence ne puisse etre deplacee qu'une 
seule fois. 

Fichier de reference : Chapitre4/desactiveroccurrence2.fla 

pionl.addEventListener(MouseEvent.MOUSE_DOWN,depl acerPion) ; 
pionl.addEventListener(MouseEvent .MOUSE_UP,fixerPion) ; 

function deplacerPiontevt :MouseEvent) { 

evt.currentTarget.startDragt ) ; 

e vt. cur rentTa rget. remove Event Listener (Mouse Event. MOUSE_D0WN,depl acerPion) ; 
} 

function fixerPion(evt:MouseEvent) { 
stopDrag( ) ; 
evt. cur rentTa rget. remove Event Listener (Mouse Event. MOUSEJP, fixer Pi on) ; 

} 

Pour interdire un deuxieme deplacement eventuel, nous devons tout simplement annuler 
les gestionnaires d'evenements. Nous commencons par appeler la fonction removeEvent- 
ListenerO pour l'evenement M0USE_D0WN si l'utilisateur clique sur l'occurrence. Au moment 
ou il relache le bouton de la souris apres un deplacement de l'occurrence, nous appelons 
a nouveau la methode removeEventListener( ) pour annuler egalement l'evenement MOUSEJJP. 
Precisons, tout de meme, que si ces occurrences doivent etre a nouveau mobiles, il est 
tout a fait possible de leur redefinir un ecouteur en faisant appel a la methode addEvent- 
Listener( ). 



Deplacer la tete de lecture du scenario 

Fichier de reference : Chapitre4/deplacerTete.fla 

II existe une problematique recurrente lorsqu'une personne doit realiser ses premieres 
animations en Flash (soulevee dans le chapitre 15) : quelle methode faut-il utiliser pour 
afficher differents contenus sur la scene d'une animation, en reaction a un evenement de 
type souris ou clavier, declenche par l'utilisateur ? II existe de nombreuses techniques. 
L'une d'entre elles, qui ne presente pas de reelle difficulte, mais qui est aussi la moins 
dynamique, consiste a deplacer la tete de lecture du scenario sur des images-cles. 

La construction des differents ecrans d'une animation peut en effet etre realisee tres 
simplement a partir de plusieurs images disposees le long du scenario. II suffit ensuite de 
programmer des boutons pour qu'ils reagissent au clic et declenchent un deplacement de 
la tete de lecture. Une telle technique signifie done que la mise en forme des ecrans passe 
par une manipulation intensive des outils de Flash et de la Timeline (le scenario). Dans le 
cas d'une animation ayant un contenu tres important, cette methode s'avere peu efficace 
et fait perdre beaucoup de temps. 
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Dans la copie d'ecran de la figure 4-33, vous decouvrez une animation avec de nombreuses 
images (et images-cles). Chacune d'entre elles possede un contenu tres different d'une 
image a 1' autre. Cette technique est conseillee aux personnes qui ne savent pas tres bien 
programmer ou ne le souhaitent pas. 
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Figure 4-33 

L 'animation correspondant a cette copie d'ecran possede cinq ecrans. Un sommaire (figure 4-34) et quatre autres 
images (figure 4-35). 

Une telle construction a partir du scenario se conduit tres facilement car il sufht de 
connaitre la technique de creation d'une image-cle (une simple pression sur la touche de 
fonction F6 du clavier) pour pouvoir construire autant d'ecrans que vous le desirez. 

Arreter la tete de lecture 

Si vous construisez une animation comme celle que nous vous proposons au telecharge- 
ment (depl acerTete.fl a) ou qui presente au moins deux images-cles, vous devrez bloquer 
la tete de lecture afin qu'elle s'arrete sur 1' image 1 de 1' animation qui contient le 
sommaire (figures 4-33 et 4-34). 



Note 

Le sommaire d'une animation ne se trouve 
utilisez une sequence animee d'introduction. 


pas 


obligatoirement 


sur 


I'image 1 


notamment lorsque 


vous 



Dans ce cas, placez l'instruction stop( ) sur l'image-cle ou vous souhaitez voir cesser la 
lecture. Cette fonction bloquera la tete de lecture lorsque celle -ci rencontrera l'image-cle. 



Deplacer la tete de lecture dans le scenario d'une animation 

Pour illustrer cette technique, nous avons realise une animation (depl acerTete.fl a) qui 
met en evidence l'utilisation de la methode gotoAndStopt ) et qui permet de placer la tete 
de lecture sur une image precise du scenario. 

L'image-cle 1 de notre animation contient, sur la scene, les elements de la copie d'ecran 
de la figure 4-34 : un titre qui introduit le sujet de 1' animation (La couleur) et cinq 
boutons de navigation. Quatre d'entre eux vont nous mener aux differents ecrans conte- 
nus aux images-cles 10, 20, 30 et 40, et le cinquieme (le bouton Sommaire) nous rame- 
nera a I'image 1. 
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Figure 4-34 

Ecran du sommaire de V animation deplacerTete.fla 
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Figure 4-35 

L'un des quatre ecrans (hormis celui du sommaire) de V animation deplacerTete.fla. 



Voici l'unique script qui se trouve sur l'image-cle 1 : il decrit les actions a realiser en 
reaction aux differents clics effectues sur les boutons de 1' animation. 

IstopO; 
btRVB. image = 10; 
btCMJN. image = 20; 
btHexa .image=30; 
btTSL.image=40; 
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btRVB.addEventListener(MouseEvent.CLICK,deplacerTete) ; 
btCMJ N. add Event Li stener(MouseEvent. CLICK, depl acerTete) ; 
btHexa.addEventListener(MouseEvent.CLICK,deplacerTete) ; 
btTSL.addEventListener(MouseEvent.CLICK.deplacerTete) ; 

function deplacerTete(evt: Event) ( 

gotoAndStop(evt.currentTarget. image) ; 

btSommai re.visible=true; 
} 

// 

btSommai re. visible=false; 
btSommai re.addEventl_istener(MouseEvent.CLICK,retourSommai re) ; 

function retourSommaire(evt:MouseEvent) { 

gotoAndStop(l) ; 
} 

L' analyse de ce script est simple, mais neanmoins interessante sur un point precis par lequel 
nous terminerons nos explications. 

• La fonction stop( ) sert a bloquer la tete de lecture sur l'image 1, celle du sommaire. 

• Cinq ecouteurs permettent de deceler le clic sur les occurrences que nous evoquions 
precedemment. 

• L'appel a la propriete visible sert a masquer le bouton Sommaire sur la premiere 
image-cle de 1' animation. 

• La fonction depl acerTete ( ) , qui est chargee de deplacer la tete de lecture sur les images 10, 
20, 30 et 40, contient l'instruction btSommai re . vi si bl e=true pour afficher cette occurrence 
lorsque l'utilisateur quitte l'ecran du Sommaire. 

Attardons-nous a present sur la presence du mot image dans notre script. 

II s'agit d'une propriete que nous ajoutons dynamiquement a chaque instance de bouton 
de navigation (btRVB, btCMJN, btHexa et btTSL). De cette facon, nous stockons une valeur 
que nous rappelons dans la fonction depl acerTete () en faisant reference a la propriete 
gotoAndStop(evt.currentTarget. image). Cette valeur correspond au numero d'image vers 
laquelle la tete de lecture doit se deplacer. 



Remarque 

II est en effet impossible de passer un argument a une fonction de rappel. L'appel a une propriete ratta- 
chee a une occurrence de clip permet done de pallier ce probleme. 



Les autres methodes 

Nous avons, jusqu'a present, utilise les methodes gotoAndStop( ) et stop( ) pour controler 
la position de la tete de lecture. Voici quelques methodes supplementaires qui proposent 
une navigation differente au sein d'une animation. 

playO : fonction qui permet de relancer la lecture prealablement interrompue avec la 
methode stopO ou gotoAndStopO. 
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gotoAndPl ay ( ) : fonction qui deplace la tete de lecture sur une image indiquee en parame- 
tre (entre les parentheses de la fonction) etrelance la lecture. Exemple : gotoAndPlay(20). 

nextFramet ) : fonction qui deplace la tete de lecture sur l'image suivante. 

prevFrame( ) : fonction qui deplace la tete de lecture sur l'image precedente. 

Deplacer la tete de lecture dun clip 

Fichier de reference : Chapitre4/deplacerTete2.fla 

Observez bien la suite d'images de la figure 4-37 : il s'agit des images-cles contenues 
dans un symbole de type clip que nous avons dispose sur la scene. L' occurrence obtenue 
a d'ailleurs ete nommee, a cette occasion, pi ante. 
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Figure 4-36 

Scenario d'un clip 




Figure 4-37 

Cette animation resulte d'une succession a" images-cles contenues dans le clip que nous evoquions a la figure 4-36. 
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Rappelons qu'un clip possede un scenario interne qui peut contenir des images et des 
images-cles utilisees alors pour generer une animation. Toutefois, il sera parfois plus 
pratique de realiser une animation dans un symbole plutot que de la creer sur le scenario 
principal d'une animation. 

Dans cet exemple, nous avons tout d'abord realise une animation dans un clip. Nous 
souhaiterions maintenant la controler pour pouvoir visualiser chaque image, l'une apres 
1' autre, dans un sens ou un autre. Nous aurions pu commencer par placer la fonction 
stop( ) sur la premiere image-cle du clip afin que la lecture de son occurrence ne soit pas 
automatique, mais nous 1' avons fait dans le script principal, sur la premiere image-cle de 
1' animation, en faisant reference aunom del 'occurrence pi ante : pi ante, stop 0. Aulance- 
ment de 1' animation par le raccourci Ctrl-Entree (Windows) ou Commande -Entree (Mac), 
le clip est done fige sur la premiere image-cle de son scenario. II ne nous reste plus qu'a 
programmer deux occurrences de clip pour controler la position de la tete de lecture. 

Les deux occurrences, intitulees btPl usTot et btPl usTard, qui ont ete placees sur la scene 
sont utilisees pour deplacer la tete de lecture de 1' occurrence qui contient notre animation 
constituees d'images-cles (figure 4-36). Voici le script qui les gere. 

plante.stop( ) ; 

btPl usTot.addEventListener(MouseEvent.CLICK,reculerTete) ; 
btPl usTard. add Event Li stener(MouseEvent. CLICK, a vancerTete) ; 



function reculerTete(evt:MouseEvent) { 

plante.prevFramet ) ; 
} 
function avancerTete(evt:MouseEvent) { 

pi ante.nextFramet ) ; 
} 

Comme explique precedemment, la premiere instruction bloque la tete de lecture du 
scenario du clip qui contient 1' animation. 

Ensuite, deux gestionnaires, accompagnes de leurs ecouteurs, ont pour fonction de deplacer 
la tete de lecture sur l'image suivante ou precedente. 



Remarque 

La fonction est bien p rev Frame () et non previousFrameO. 



Si nous souhaitions relancer la lecture du clip, il faudrait utiliser l'instruction suivante : 

plante.playO; 



Note 

Les fonctions gotoAndStop( ) et gotoAndPl ay ( ) fonctionnent egalement sous la meme condition, e'est- 
a-dire en les prefixant du nom de I'occurrence pi ante . gotoAndStop. 
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Les mouvements 
d'une occurrence sur la scene 



Flash est avant tout un logiciel d' animation. La programmation a ete implemented dans 
TIDE de Flash progressivement, et il est done tout a fait naturel que nous puissions ecrire 
des scripts d' animation d' occurrences. 

D'un autre cote, il est tout a fait possible de realiser des interpolations dans Flash, sans 
recourir a la moindre ligne de code. C'est ce que font les utilisateurs qui ne possedent pas 
de notions de programmation. 

Quels sont done les avantages de realiser une animation a partir d'un programme ecrit en 
ActionScript ? La reponse est simple : une animation issue d'un script sera plus facile a 
configurer et a modifier. De plus, il sera parfois impossible de realiser des animations 
avec un mouvement precis a partir du scenario, done sans programmation. 

Pourquoi alors existe-t-il autant de techniques pour animer une occurrence ? 

La reponse est encore une fois tres simple : tout depend de ce que vous souhaitez animer. 

Si vous devez simplement faire tourner une occurrence en continu, sans controler le 
lancement de cette animation, ni meme son arret, vous pouvez utiliser l'evenement 
ENTER_FRAME. Par ailleurs, si vous disposez deja d'un tel evenement dans un script, pour- 
quoi faire appel a un autre gestionnaire, alors que celui-ci peut recevoir une ligne 
d'instruction supplementaire chargee de faire tourner l'occurrence. 

En revanche, dans certains cas, il sera indispensable de controler le lancement et/ou l'arret 
d'un mouvement d'occurrence. Vous devrez alors utiliser la classe TimerO qui possede 
des methodes facilitant ces operations. 
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Troisieme et derniere question : dans quel cas privilegier l'utilisation de la classe TweenO 
alors que des proprietes d'occurrences combinees avec la classe TimerO et/ou l'evene- 
ment ENTER_FRAME aboutissent au meme resultat ? 

La reponse a apporter a cette interrogation est plus longue car elle necessite de developper 
certains arguments. 

Vous allez decouvrir que vous pouvez programmer une interpolation de differentes f aeons. 
L'utilisation de l'evenement ENTER_FRAME est plus facile a comprendre et a maitriser en 
comparaison de la classe Tween( ), mais cette derniere est plus precise pour configurer un 
mouvement. Prenons l'exemple des variations de vitesse dans une animation : pour 
donner une impression d'elasticite ou de rebond, il faudrait ecrire de nombreuses lignes 
de code en utilisant la premiere solution, alors que la classe Tween( ) constitue une solution 
plus efficace. 

Par ailleurs, lorsqu'un mouvement doit etre mis en pause ou reproduit dans le sens inverse, 
la classe TweenO propose des methodes pretes a l'emploi, alors qu'avec l'evenement 
ENTER_FRAME et l'appel de proprietes d'occurrences, tout doit etre programme. 

Nous pourrions encore vous exposer plus longuement les avantages de la classe TweenO, 
mais vous les decouvrirez dans les exemples de ce chapitre, qui presente 1' ensemble des 
solutions disponibles pour gerer les mouvements d'une occurrence sur la scene. 

Utilisation de l'evenement ENTER_FRAME 

Dans la mesure ou la classe TweenO s'avere plus puissante que l'utilisation de l'evene- 
ment ENTER_FRAME, pourquoi faire appel a ce dernier dans un gestionnaire ? 

Dans certains cas, vous disposerez deja d'une fonction appelee par un ecouteur faisant 
reference a cet evenement. Vous pourrez alors ajouter facilement les quelques lignes de 
codes necessaires pour obtenir un mouvement d'occurrence. Par ailleurs, rappelons que 
tout le monde n'a pas le meme niveau en programmation : si la classe TweenO vous parait 
complexe a employer, l'evenement ENTER_FRAME dans un gestionnaire reste une solution 
accessible. 

Fichier de reference : Chapitre5/enterframe.fla 

Commencons par un premier exemple, celui d'une balle qui se deplace de la gauche vers 
la droite de la scene, a vitesse constante. 

ball el. addEvent Listener^ Event. ENTER_FRAME,deplacerBal lei); 

function deplacerBallel(evt:Event) { 

ballel.x+=1.5; 
} 

Ce script devrait vous etre familier car il a ete utilise dans le chapitre 3 dedie a la gestion 
des evenements. Nous allons maintenant etudier comment faire varier la vitesse de depla- 
cement d'une occurrence. 
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Ralentir un mouvement 

Dans l'exemple precedent, ou le mouvement s'effectue a vitesse constante, le pas est fixe 
a une valeur de 1 ,5 pixel. Pour ralentir un mouvement, il suffit alors de faire varier le pas 
de deplacement de 1' occurrence. 

Une solution simple consiste a deplacer 1' occurrence d'une valeur proportionnelle a la 
distance qu'il lui reste a parcourir. Par exemple, avec un coefficient de proportionnalite 
de 10 %, s'il faut la deplacer de 200 pixels, on commence par ajouter 20 pixels a sa 
position (10 % de 200). II reste alors 180 pixels a parcourir. Au deuxieme passage, on 
ajoutera 18 pixels a sa position (10 % de 180) et ainsi de suite, jusqu'a ce qu'il ne reste 
que quelques pixels avant la position definitive de l'occurrence. Le script suivant met en 
ceuvre ce principe. 

balle2.addEvent Li stener( Event. ENTER_FRAME,deplacerBalle2); 



function deplacerBal 
balle2.x+=(480-bal 
} 



e2(evt:Event) 
e2.x)*0.07; 



Le calcul 480-balle2.x represente la distance que l'occurrence doit encore parcourir avant 
d'atteindre la position situee a 480 pixels du bord gauche de l'ecran. Nous deplacons 
ensuite l'occurrence de 7 % de la distance restant a parcourir. 

Pour etre optimise, ce script devrait contenir un test (dans la fonction deplacerBalleO) 
qui verifierait si la distance restant a parcourir est inferieure a 1 pixel, pour eviter au 
lecteur Flash de calculer des valeurs proches de 0. 

if(480-balle2.x<l){ 

bal le2. remove Event Listener (Event. ENTER_FRAME, deplacerBal le2) ; 

balle2.x=480; 
} 

Cette technique presente tout de meme l'avantage de pouvoir modifier facilement le 
pourcentage, et ainsi d'augmenter ou de diminuer la vitesse de deplacement. II est egalement 
tres facile de deployer une telle methode. 



Accelerer un mouvement 

De facon symetrique au ralentissement, il suffit d'augmenter le pas de deplacement d'une 
occurrence pour obtenir un mouvement accelere. 

Nous allons incrementer progressivement une variable. 

bal le3.addEvent Li stener( Event. ENTER_FRAME,deplacerBalle3); 

var paslnitial :Number = 0; 

function deplacerBal le3(evt:Event) { 

paslnitial +=0 . 1 ; 

bal le3.x+=paslnitial ; 
} 
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Les deux parametres que vous pouvez modifier pour obtenir un resultat different sont : 

• pas Initial : definissez une valeur differente de pour obtenir une occurrence deja en 
mouvement au moment de l'appel au gestionnaire. Si vous definissez une valeur initiale 
negative, vous obtiendrez un recul de 1' occurrence avant qu'elle ne se mette a avancer. 

• paslni ti al+=0. 1 : en augmentant ou en diminuant la valeur 0.1, vous obtiendrez un 
mouvement plus ou moins accelere. 

Cette technique presente l'avantage d'etre simple a deployer, mais il est conseille d'ajouter 
un test conditionnel pour bloquer la vitesse lorsqu'elle atteint une certaine valeur. 

function deplacerBalle3Cevt:Event) { 

paslni ti al+=0 . 1 ; 

if (paslnitial>3) paslni ti al = 3; 

balle3.x+=paslnitial ; 
} 

Pour optimiser notre code et ne pas executer en continu un test inutile, il serait preferable 
d'utiliser cette fonction : 

function deplacerBalle3(evt:Event) { 
paslni ti al+=0 . 1 ; 
if (paslnitial>3) { 
bal le3.removeEventl_istener(Event.ENTER_FRAME,depl acerBalle3) ; 
bal le3.addEvent Li stenert Event. ENTER_FRAME,deplacerBalle3Bis); 
} 

balle3.x+=paslnitial ; 
} 

II ne vous resterait plus qu'a redefinir une fonction intitulee deplacerBalle3Bis qui ne 
contiendrait qu ' une seule ligne d ' instruction : b a 1 1 e 3 . x+= p a s I n i t i a 1 . 

En modifiant le script initial, comme vous le propose l'exemple ci-dessous, vous obtiendrez 
un mouvement saccade : 

function deplacerBane3(evt:Event) { 

paslni ti al+=0 . 1 ; 

if (paslnitial>3) paslni ti al = 0.5; 

balle3.x+=paslnitial ; 
} 

Saccader un mouvement 

Le script ci-dessous permet d' obtenir un mouvement saccade, de facon plus ou moins 
analogue a celle que nous venons de voir a la fin du developpement precedent, mais nous 
faisons appel a une fonction mathematique plus complexe. Referez-vous eventuellement 
a la section Utilisation des fonctions Math. si n() et Math. cos () de ce chapitre pour une 
explication plus detaillee. 

bal le4.addEvent Listener^ Event. ENTER_FRAME,deplacerBalle4); 

var coef :Number = 0; 

function deplacerBalle4(evt:Event) { 

coef+=0.07; 

bal le4.x+=Math.abs( Math. cos (coef))*2; 
} 
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En modifiant la valeur d' incrementation de la variable coef, vous pourrez augmenter ou 
ralentir le mouvement. La valeur 2 de la derniere ligne permet, elle, d'allonger la distance 
entre deux saccades. 

Obtenir un mouvement sinueux 

Considerons le script suivant. 

ba11e5. addEvent Li stener( Event. ENTER_FRAME,deplacerBalle5); 

var valeur: Number = 0; 

function deplacerBal le5(evt:Event) { 

valeur+=0.1; 

balle5.x+=2; 

balle5.y=227.8+Math.cos(valeur)*15; 
} 

En modifiant la valeur d' incrementation de la variable valeur (par exemple . 3 au lieu de 
0.1), vous pourrez augmenter le nombre d' oscillations verticales. Plus cette valeur tendra 
vers 0, plus l'ondulation obtenue sera allongee. 

La derniere valeur de ce script (15) permet de definir l'amplitude de l'oscillation. Plus 
cette valeur sera grande, plus les deplacements verticaux de l'occurrence seront importants. 



Utilisation de la classe Tween() 



Quelques reperes 

Nous allons utiliser a plusieurs reprises differents termes qui font tous reference a la meme notion : la 
programmation d'une interpolation de mouvement. Nous parlerons done de tweening, d'interpolation, ou 
bien encore de tween. 



Nous allons decouvrir, dans cette partie du livre, qu'il est possible de realiser des animations 
d'occurrences avec peu de code. En revanche, la teneur des lignes d' instructions est plus 
abstraite en comparaison des scripts que nous avons eu a gerer jusqu' a present. 

Avant de vous lancer dans la redaction de vos premieres lignes d'instructions, vous devez 
etre conscient de la necessite d'importer les classes easing et transitions. Sans l'execution 
prealable des deux lignes ci-dessous, vous ne pourrez pas faire appel a la classe Tween ( ), 
car le lecteur Flash ne les integre pas par defaut. 



Membres d'une classe 

II s'agit des differentes methodes et proprietes qui appartiennent a une classe. 
import fl .transitions. easing.*; 
import fl .transitions .*; 



Par ailleurs, notez que toutes les proprietes avec lesquelles vous avez 1' habitude de travailler 
pour manipuler vos occurrences vont pouvoir etre utilisees dans une animation basee sur 
la classe Tween () (proprietes x, y, scaleX, seal eY, width, height, alpha et rotation). 
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Decouvrons a present l'unique ligne d'instruction necessaire au deroulement d'un menu. 

new Tween(balle, "y" ,Regul ar.ease0ut,20,180,2,true) ; 

Au premier abord, cette ligne ne ressemble pas a celle que nous pourrions utiliser pour 
regler une simple propriete d'occurrence, mais rassurez-vous, toutes les parties de cette 
instruction sont tres explicites. 

Voici le role de chaque parametre place a l'interieur des parentheses : 

• balle : le nom de 1' occurrence concernee par 1' interpolation a base de la classe 

Tween( ). 

• "y" : nom de la propriete qui va etre utilisee pour realiser 1' interpolation. Rappelons 
que vous pouvez utiliser les proprietes x, y, scaleX, scaleY, width, height, alpha et 
rotation. 

• Regular. easeOut : mode d'animation pour obtenir un effet. Nous reviendrons sur ce 
parametre apres les explications relatives aux parametres de la classe Tween( ). 

• 20 : valeur de depart pour 1' interpolation de mouvement a base de la classe Tweent ). 
Dans notre exemple, cette valeur correspond notamment a la position du point 
d'alignement (appele aussi point d'ancrage) de l'occurrence. 

• 180 : valeur d'arrivee de 1' interpolation (c'est egalement la position du point d'aligne- 
ment). 

• 2 : duree de 1' interpolation exprimee en secondes. 

• true : parametre servant a preciser que la valeur precedente (le chiffre 2) est exprimee 
en secondes et non en images. En ayant une cadence de 50 images par seconde dans 
une animation, nous pourrions utiliser la syntaxe suivante pour preciser une duree de 
2 seondes : new Tweentballe, "y" .Regular. easeOut, 20, 200, 100. false). 

La figure 5-1 montre l'effet de ces parametres sur la scene. 

Dans l'etat actuel du script, le mouvement peut etre execute une fois, mais il est difficile 
de le controler davantage. Imaginons en effet que nous souhaitions realiser le mouvement 
inverse (pour re-enrouler le menu) ou realiser une action lorsque 1' interpolation est terminee. 
Pour que cela soit possible, il faudrait completer le script de la facon suivante : 

Var deroulement = new Tweentbal le,"y" .Regular. easeOut, 20, 180, 2, true) ; 

Ainsi, il devient possible de prevoir d' autres actions et interactions avec le mouvement. 
C'est la variable deroulement (qui est une instance de la classe Tween( )) que nous allons 
pouvoir utiliser pour completer notre script. 

Avant d'aborder le developpement suivant, consultez le fichier ci-dessous pour decouvrir 
un exemple ou le declenchement d'un tweening se fait par un clic sur une occurrence. 

Fichier de reference : Chapitre5/tween.fla 
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Figure 5-1 

Effet des parametres de la classe Tween sur la scene 



Executer une instruction a la fin d'une interpolation 

Dans l'exemple qui va suivre, nous allons deplacer une occurrence sur la scene en 
demontrant qu'avant et apres 1' interpolation il est possible d'executer une ou plusieurs 
lignes d' instructions. 

Avant 1' interpolation, il suffit tout simplement de placer le code dans la fonction de rappel 
qui contient l'instanciation de la classe Tween( ). Dans notre exemple, il s'agit de l'instruction 
balle2.scaleX = bal le2.scaleY = 0.6, qui permet de regler l'echelle de 1' occurrence a 
60 % de sa taille d'origine. 

Apres l'interpolation, nous ajoutons un ecouteur qui gere l'evenement TweenEvent. MOTION 
_FINISH. 

var bouge:Tween; 
stage.addEventListener(MouseEvent.CLICK,deplacerBal le2) ; 

function deplacerBal le2(evt:MouseEvent) { 
balle2.scaleX = bal 1 e2 . seal eY = 0.6; 

bouge = new Tween(balle2,"x" .Strong. ease0ut,balle2.x,mouseX, 1.5, true) ; 
new Tween (bal le2,"y" ,Strong.ease0ut,balle2.y,mouseY,1.5,true) ; 
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bouge.addEventListener(TweenEvent.MOTION_FINISH .augmenterTail leOccurrence) 



} 



function augmenterTail leOccurrence (evt:Tween Event) 
bal1e2.sca1eX=l; 
ba11e2.scaleY-lj 

} 



Pieges classiques 

Le deploiement de lignes d' instructions gerant un tween dans un programme est souvent 
source d'erreurs pour deux raisons principales : la portee des variables locales et la 
confusion entre declaration et initialisation. 

Fichier de reference : Chapitre5/tween3.fla 



Une variable locale 

Les developpeurs neophytes oublient souvent qu'une variable a une portee limitee a la 
fonction dans laquelle elle a ete declaree. Ainsi, en generant le code ci-dessous, vous ne 
pouvez faire reference a l'instance de la classe Tween ( ) qu'a l'interieur de la fonction de 
rappel deplacerBalleO. 

import fl .transitions. easing.*; 

import fl .transitions .*; 

// 

btl_ancer.addEventl_istener(MouseEvent.CLICK,deplacerBal le) j 

function deplacerBalle(evt:MouseEvent) { 

var bouge:Tween = new Tween(balle, "x" .Strong. easeOut, 60, 400, 2, true) ; 

bouge.addEventListener(TweenEvent.MOTION_FINISH .augmenterTail leOccurrence) ; 
} 

function augmenterTail leOccurrence(evt:TweenEvent) { 

traceC'Mouvement termine"); 
} 

bal le.addEventl_istener(MouseEvent .CLICK.replacerBal le) ; 

function replacerBalle(evt:MouseEvent) { 

bouge.yoyo( ) ; 
} 

L' execution de ce script genere une erreur car vous faites reference a l'instance bouge 
dans la derniere fonction du programme alors qu'elle n'a pas ete declaree. Vous devez 
done deplacer la declaration de la variable pour qu'elle puisse etre accessible de n'importe 
quel endroit du programme. 
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Pour corriger votre script et pouvoir faire reference a l'instance bouge a partir d'autres 
fonctions, effectuez le changement suivant : 

import fl .transitions. easing.*; 

import fl .transitions.*; 

// 

var bouge:Tween; 

bt Lancer. addEvent Listener (Mouse Event. CLICK, deplacerBal le) ; 

function deplacerBal le(evt:MouseEvent) { 
bouge = new Tween(balle, "x", Strong. easeOut, 60, 400, 2, true) ; 
bouge. add Event Li stenerdween Event. M0TI0N_FIN I SH .augmenterTail leOccurrence) ; 



function augmenterTail leOccurrence(evt:TweenEvent) { 

traceC'Mouvement termine"); 
} 

balle. addEvent Li stenertMouseEvent. CLICK, repl a cerBal le) ; 

function replacerBal le(evt:MouseEvent) { 

bouge. yoyoC ) ; 
} 

Nous avons place la declaration de l'instance bouge en dehors de la fonction et nous 
pouvons ainsi y faire reference, notamment dans la derniere fonction repl acerBal 1 e( ). 

Declarer n'est pas initialiser 

Dans l'exemple ci-dessous, vous pouvez constater que l'ecouteur qui gere l'evenement, 
TweenEvent.MOTION_FINISH, se trouve en dehors de la fonction de rappel deplacerBalleO. 
Cette ligne d'instruction sera done executee avant meme que l'instance bouge ne soit 
initialisee, ce qui genere une erreur. 

Si vous replacez cette ligne d'instruction dans la fonction de rappel deplacerBalleO ou 
dans une autre qui ne sera appelee qu'a partir du moment ou la variable bouge aura ete 
initialisee, cela ne posera plus de probleme. 

var bouge:Tween; 

bt Lancer. addEvent Li stenertMouseEvent.C LI CK.depl ace rBal le) ; 

function deplacerBal le(evt:MouseEvent) { 
bouge = new Tween(balle, "x", Strong. easeOut, 60, 400, 2, true) ; 

} 

bouge. addEvent Li stenerdween Even t.M0TI0N_FIN I SH .augmenterTail leOccurrence) ; 
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Le script correct est le suivant : 

var bouge:Tween; 
btLancer.addEventListener(MouseEvent.CLICK,deplacerBal le) ; 

function deplacerBal le(evt:MouseEvent) { 

bouge = new Tweentbal le,"x" .Strong. easeOut, 60, 400, 2, true) ; 

bouge.addEventl_istener(TweenEvent.MOTION_FINISH .augmenterTailleOccurrence) 
} 



Les modes d'animation 

Au debut de ce developpement dedie a la classe Tween( ), nous vous precisions que nous 
reviendrions sur le parametre Regul ar ; voyons en detail l'interet de ce reglage. 

Pour obtenir des effets dans 1' interpolation, vous pouvez remplacer le parametre Regul ar 
(appele aussi fonction d' acceleration) par l'un des quatre autres de la liste ci-dessous : 

• Back 

• Bounce 

• Elastic 

• Strong 

A cela s'ajoutent trois parametres supplementaires qui definissent l'application de l'effet 
en debut ou en fin de trajectoire, ou bien meme les deux : 

• easeln 

• easeOut 

• easelnOut 

Des effets particuliers 

II est important de signaler qu'une combinaison des parametres ci-dessus avec les 
proprietes x et y permet d'obtenir des mouvements aux trajectoires sinueuses tres variables. 
Essayez, par exemple, ces quelques combinaisons : 



Remarque 

Configured une animation de 500 pixels de largeur par 300 de hauteur. Positionnez une occurrence inti- 
tulee balle a 20 pixels du haut et du bord gauche de la scene. Saisissez le script ci-dessous, puis 
remplacez la paire de lignes d'instructions contenues dans la fonction de rappel par celles qui sont 
proposees en exemple. 



import fl .transitions. easing.*; 
import fl .transitions .*; 

bal le.addEventl_istener(MouseEvent.CLICK,l ancer) 
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function lancer(evt:MouseEvent) { 

new Tween(bal le, "x" , Regul ar.ease0ut,balle.x,420,2,true) ; 

new Tween(bal le, "y" .Bounce. ease In, bal le.y ,150, 2, true) ; 
} 



Exemples de mouvements : 



new Tween(bal le, 


"x 


new Tween(bal le, 


"y 


new Tween(bal le, 


"x 


new Tween(bal le, 


"y 


new Tween(balle, 


"x 


new Tween(bal le, 


"y 


new Tween(balle, 


"x 


new Tween(bal le, 


"y 


new Tween(balle, 


"x 


new Tween(balle, 


"y 


new Tween(bal le, 


"x 


new Tween(bal le, 


"y 



new Tween(bal le, 
new Tween(bal le, 



.Regular. ease In, bal le.x,420,2,true) ; 
, Bounce. easel n, bal le.y ,150. 2, true) ; 

.Elastic.easeln.bal le.x,420,3,true) ; 
.Bounce. ease I nOut, bal le.y ,150, 2, true) ; 

, Bounce. easel n.balle.x, 420. 3, true) ; 
, Bounce. easeOut, bal le.y, 150, 2, true) ; 

.Bounce. easel n.balle.x, 420.1, true) ; 
, Bounce. easeOut, bal le.y, 150, 3, true) ; 

, Bounce. easeOut, bal le.x,420,4,true) ; 
.Bounce. ease I nOut, bal le.y ,150,1, true) ; 

.Bounce. easeOut, bal le.x,420,4,true) ; 
, El as tic. ease I nOut, bal le.y ,150, 3, true) ; 

.Bounce. easeOut, bal le.x,420,2,true) ; 
,Elastic.easeIn,balle.y,150,5,true); 



Editez l'unique symbole de votre animation pour remplacer la forme rond par un carre. 
Replacez l'occurrence sur la scene, puis essayez les lignes d' instructions ci-dessous. 

new Tween(balle, "scaleX" .Bounce. easeOut, 1 ,3, 2, true) ; 
new Tween(bal le, "seal eY" , El asti cease In, 1 ,3, 2, true) ; 

new Tween(balle, "scaleX" .Bounce. easeOut, 0.5, 3,1, true) ; 
new Tween(balle, "scaleY" .Bounce. ease In, 1,3, 2, true) ; 

new Tween(balle, "scaleX" .Bounce. easeOut, 0.5, 3,1, true) ; 
new Tween(balle, "scaleY" , El astic.easeln0ut,l,3,3,true) ; 

new Tween(balle, "scaleX" .Bounce. ease In, 0.5, 3, 3, true) ; 
new Tween(balle, "scaleY" .Elastic. easeOut, 1,3, 3, true) ; 

Notez que le temps alloue aux durees des differentes interpolations donne des resultats 
tres differents. II ne suffit pas de combiner les effets (Bounce, Elastic, Regular, Strong et 
Back), ni meme leurs applications (easeln, easeOut et easelnOut), mais de regler de facon 
appropriee la duree de 1' interpolation. 
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Proprietes et methodes complementaires 

Nous avons, jusqu'a present, explique comment realiser une interpolation par programma- 
tion ActionScript grace a la classe Tween( ), mais nous n' avons pas detaille toutes les possi- 
bility de reglages complementaires. Voici deux tableaux qui vous presentent les proprietes 
et methodes que vous pouvez utiliser pour un meilleur controle de vos interpolations. 

Nous utiliserons l'exemple ci-dessous pour commenter le tableau 5-1. 

bouge = new Tween(balle, "x" .Strong. easeOut, 60, 400, 2, true) ; 

Tableau 5-1 Les proprietes de la classe TweenQ 



Norn de la propriete 


Role de la propriete 


begin 


Valeur de depart de ('interpolation. 60 dans notre exemple. 


duration 


Duree de I'interpolation. 2 dans notre exemple. 


finish 


Valeur de fin de I'interpolation. 400 dans notre exemple. 


FPS 


Frames/seconde ou IPS pour images/seconde. 


tunc 


Permet de connaitre la fonction d'acceleration utilisee. 


isPl aying 


Parametre permettant de savoir si une interpolation est en oours d'execution. 


1 ooping 


Parametre servant a preciser si une interpolation doit etre execut.ee en boucle. 
Cette propriete peut egalement etre lue. 


obj 


Norn de I'objet (ou occurrence) concerne par I'interpolation. Valeur bal 1 e dans notre exemple. 


position 


Permet d'obtenir la valeur de la propriete utilisee dans I'interpolation. Dans notre exemple, 
I'occurrence va se deplacer de 60 a 400 pixels ; la propriete position ne peut done nous 
renvoyer qu'une valeur comprise dans cet intervalle. 


prop 


Permet de connaitre la propriete utilisee dans I'interpolation. Dans notre exemple, nous 
obtiendrions x. 


time 


Permet d'obtenir le temps ecoule depuis le debut de I'interpolation. 


useSeconds 


Permet de savoir si le dernier parametre de I'interpolation est exprime en secondes. 



Tableau 5-2 Les methodes de la classe Tween() 

Nom de la methode Role de la methode 

continueTo( ) Permet de poursuivre I'interpolation en cours vers une nouvelle valeur. Cette methode ne 

contient pas de valeur de depart car elle utilise la valeur courante. Seules les valeurs 
d'arrivee et la nouvelle duree doivent etre precisees. 

f forward( ) Termine I'interpolation sans executer les interpolations intermediaires. 

nextFramet ) Permet d'afficher I'image suivante lorsqu'une interpolation est arret.ee. 

prevFramet ) Permet d'afficher I'image precedente lorsqu'une interpolation est arretee. 

resumeO Relance une interpolation lorsqu'elle aete miseen pause a I'aide de la methode stopO. 

rewi nd ( ) Reaffecte la valeur de depart a I'occurrence interpolee. 

s ta rt ( ) Lit une interpolation depuis sa valeur de depart. 

stop( ) Permet d'interrompre I'interpolation. 

yoyo ( ) Methode tres pratique permettant d'effectuer I'interpolation dans le sens inverse. 
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Utilisation de la classe Timer() 

II est interessant de faire appel a la classe Timer( ) lorsqu'il est necessaire de maitriser le 
rythme de l'effet. 

Avec l'evenement ENTER_FRAME et la classe Tween ( ) , il est impossible de controler la cadence 
d'un mouvement. La classe Timer( ) permet de gerer cet aspect-la d'une animation. 

Prenons l'exemple d'une horloge, ou le mouvement d'une aiguille doit se produire de 
facon reguliere, a chaque seconde. Voici le code qui permet d'obtenir ce comportement. 



Remarque 

Si vous ne connaissez pas la classe Timer( ), consultez la fin du chapitre 3 qui traite de cette technique. 



var mecanisme:Timer = new Timer(lOOO) ; 
var instant_T:Date; 
var coefHorai re: Number; 

function tournerAiguilles(evt:TimerEvent) { 

instant_T = new DateO; 

coefHorai re = instant_T.getHours( )>=13 ? 15 : 30; 

aigHeures. rotation = instant_T.getHours( )*coefHorai re; 

a igMinutes. rotation =instant_T.getMinutes( )*6; 

aigSecondes. rotation = instant_T.getSeconds( )*6; 
} 

mecanisme.addEvent Listener (Timer Event. TIMER, tournerAiguil les) ; 
mecanisme.start( ) ; 

Ce script est interessant car il presente une technique d' animation totalement differente 
de toutes celles que nous avons utilisees dans ce chapitre. Alors que la classe Tween ( ) nous 
permettait de definir une duree de mouvement, mais sans nous permettre de controler la 
cadence, ici, nous nous appuyons sur une temporisation tres precise. 

Par ailleurs, ce script nous permet de decouvrir la gestion de la classe DateO, egalement 
abordee au chapitre 8, consacre aux tableaux, en gerant les jours de la semaine. 

L'exemple suivant va combiner les classes Tween( ) et Timer( ) pour demontrer qu'on peut 
executer un mouvement d'une duree precise a intervalle regulier. 

import fl .transitions.*; 
import fl .transitions. easing.*; 

var compteurrTimer = new Timer(2500); 
var mouvementBil le:Tween; 

function avancerBil le(evt:TimerEvent) { 

new Tween (bil leMobile, "x" .Regular. ease In, bil leMobile.x,Math.random( )*500, 1.5, true) ; 

mouvementBil le = new Tween(bil leMobile, "y" .Strong. easeOut, bil leMobile. y, Math. 

*randomO*280,2,triie); 

mouvementBil le.addEvent Li stener (Tween Even t.M0TION_F I NISH.pl acerBille) ; 
} 
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compteur.addEvent Listener (Timer Event. TIMER, a vancerBil le) ; 
compteur.start( ) ; 

function placerBil le(evt:TweenEvent) { 

var nouvelleBille:Bil le = new BilleO; 

nouvel leBille.x=bil leMobile.x; 

nouvel leBille.y=bil leMobile.y ; 

addChild(nouvelleBille); 
} 

Dans un premier temps, nous mettons en place un timer avec un intervalle regulier de 
2,5 secondes (new Timer(2500)). Puis nous definissons le mouvement de la bille, qui se 
deplace sur la scene en ecrivant deux lignes d' instructions faisant appel a la classe Tween( ). 
Comme vous l'aurez peut-etre remarque, nous faisons reference aux mouvements sinueux 
abordes precedemment lors de la presentation de la classe Tween( ) en combinant, dans cet 
exemple, les fonctions d' acceleration Regular. easeln et Strong. easeOut. 

En conclusion, c'est la repetition a intervalle plus ou moins long mais regulier qui nous 
permet d'obtenir, dans ces deux cas et d'une facon generale avec la classe TimerO, un 
mouvement. 



Utilisation des fonctions Math.sinQ et Math.cosQ 

Pour obtenir un mouvement pendulaire, circulaire ou ondulatoire, vous allez decouvrir que le 
code a ecrire fait appel aux fonctions Math.sinO etMath.cosO. D'une facon plus generale, 
nous pouvons dire qu'elles vont nous permettre d'obtenir des mouvements cy cliques. 

A la lecture de ces deux termes, cosinus et sinus, vous etes peut-etre deja reticent a l'idee 
de devoir travailler avec de telles notions, car elles vous rappellent de mauvais souvenirs 
de trigonometrie qui datent de la classe de troisieme, au college ! 

Essayons de vous rappeler et/ou de vous faire comprendre ce que nous permettent d'obtenir 
les fonctions trigonometriques cosinus et sinus. 

Commencez par essayer d'effectuer les operations ci-dessous : 

• 3+4=? 

• 5-3=? 

• 8+2=? 

• 3x4=? 

Ces calculs vous semblent simples car ce sont des operations que vous etes amenes a 
faire au quotidien. Essayons d'aller plus loin, dans un tout autre registre : 

• 2X7I=? 

• V9 = ? 
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Meme si ces deux questions peuvent paraitre plus complexes au premier abord, notre 
memoire prend vite le dessus. Pour le calcul avec pi, nous nous rappelons de facon auto- 
matique que ces deux lettres sont associees a la valeur 3,14. Dans la cas de la racine 
carree, nous nous souvenons que le nombre situe sous le signe V doit etre le resultat de la 
multiplication d'un nombre par lui-meme. La racine carree et les calculs faisant appel a 
pi vous semblent done plus difficiles qu'une operation a base d' addition, de soustraction, 
de division ou de multiplication. Mais les operations ci-dessous vous paraissent-elles 
plus faciles que Vl6 ou V25 ? 

• 234 786x765 432 = ? 

• 4 537 365/38 = ? 

Quel serait votre reflexe dans ce cas present ? Vous allez tres probablement vous tourner 
vers la calculatrice ! 

Meme si vous savez faire une multiplication et une division, et que vous avec un ordre de 
grandeur du resultat obtenu (un nombre plus grand pour une multiplication, plus petit 
pour une division), vous utilisez une calculatrice pour aller plus vite, mais aussi parce 
que vous faites confiance au resultat obtenu. Eh bien pour le calcul des sinus et cosinus 
e'est pareil, il suffit que vous connaissiez l'ordre de grandeur du resultat, meme si vous 
n'etes pas capable de le calculer. 

Quel peut done etre le resultat du calcul de cosinus 17 par exemple, mais surtout comment 
l'exploiter dans le calcul d'un mouvement ? 

En tant que non mathematicien, la seule reponse que je puisse vous apporter est que le 
resultat sera un nombre compris entre -1 et 1. 

Mais ces valeurs sont-elles pour autant aleatoires ? Non, et vous pouvez le constater 
sur la figure 5-2 qui associe un tableau de valeurs avec un graphique des fonctions sinus 
et cosinus. 
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Figure 5-2 

Les valeurs des cosinus et sinus de quelques nombres, avec le graphique associe. 
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Rappel 

Nous utiliserons egalement dans nos exemples, la fonction Math.absO qui permet d'obtenir la valeur 
absolue d'un nombre, c'est-a-dire une valeur toujours positive (la valeur absolue de -5 est 5 par exemple). 



Remarque 

Dans le graphique de la figure 5-2, les valeurs -1 et 1 sont inverses car nous avons utilise Flash pour reali- 
ser cette illustration. Rappelons que, dans ce logiciel, le coin superieur gauche de la scene correspond 
aux coordonnees (x,y) = (0,0). De ce fait les valeur positives sont dans la scene et les valeurs negatives 
au-dessus. 



Vous pouvez constater sur le graphique de la figure 5-2 que le resultat des fonctions sinus 
et cosinus est bien toujours compris entre -1 et 1 en passant par 0. Nous avons ici choisi 
des valeurs comprises entre et 6,3, mais cela aurait ete vrai pour toute autre suite de 
nombres. Ajoutons que le cosinus de vaut 1 et le sinus de vaut 0, nous avons done un 
decalage initial de 1 . 

Nous avons positionne des carres et des ronds sur le graphique de la figure 5-2 pour illustrer 
les valeurs obtenues lors du calcul des fonctions sinus et cosinus. Cela nous permet d'effec- 
tuer un deuxieme constat, le calcul des sinus et cosinus renvoie des valeurs periodiques : 
le graphique obtenu sera le meme pour des valeurs situees entre et 6,3 que pour des 
valeurs comprises entre 6,3 et 12,6. 

Essayez de realiser une premiere animation avec le code ci-dessous ; vous constaterez 
que le calcul du cosinus ou du sinus vous permet de faire bouger une occurrence en x ou 
en y d'un point a un autre. 

Ajoutons simplement que pour obtenir la trajectoire que vous allez decouvrir, il nous a 
fallu multiplier le resultat obtenu par le calcul du cosinus par 50 pour obtenir un deplace- 
ment sur 100 pixels : de -50 a +50 pixels (rappelons que la valeur du cosinus varie entre 
-1 et 1). 

Fichier de reference : Chap1tre5/coss1nl.fla 

var valeurCroissante:Number = 0; 

planete.addEventListener(Event.ENTER_FRAME,mouvementl_ineaire) ; 

function mouvementLineaire(evt:Event) { 

valeurCroissante+=0.1; 

evt.currentTarget.x=255+(Math.sin(valeurCroissante)*50) ; 
} 

Le mouvement de cette occurrence est un deplacement horizontal variant d'une position 
situee a 205 pixels du bord gauche de la scene (255 - 50) jusqu'a celle situee a 305 pixels 
(255 + 50). La valeur 255 de la ligne precedente correspond a l'axe autour duquel l'occur- 
rence se deplace. 
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Remarque 

Si vous observez un saut de I'image au lancement de I'animation, reglez manuellement la position x de 
votre de occurrence a 255 pixels (via la palette Proprietes). 



Mouvement circulaire 

Fichier de reference : Chapitre5/cossin2.fla 

Dans ce deuxieme exemple, nous reussissons a obtenir un mouvement circulaire car nous 
combinons en x et en y, le calcul d'un cosinus et d'un sinus, en partant de la meme valeur. 
Consultez le lien ci-dessous pour vous rendre compte de l'obtention d'un mouvement 
circulaire qui resulte de la combinaison de deux positions dans un repere orthonorme (le 
cosinus est represents par le point qui se deplace sur l'axe horizontal, le sinus par celui 
qui se deplace sur l'axe vertical). II est en effet tres difficile d'expliquer par ecrit, sans 
possibility de schema anime, la demonstration suivante : 

http: //www.yazo.net/index.php?option=com_content&task=view&id=32&Itemid=47 

var valeurCroissante:Number = 0; 

pi anete. add Event Listener (Event. ENTER_FRAME,mouvementCi rculaire) ; 

function mouvementCirculaire(evt:Event) { 
valeurCroissante+=0.1; 

evt. cur rentTarget.x=250+( Math. cos (valeurCroissante)*100) ; 
evt.currentTarget.y=130+(Math.sin(valeurCroissante)*100) ; 



Mouvement plus elliptique 

Dans l'exemple precedent, nous obtenons une trajectoire circulaire car l'occurrence se 
deplace du meme nombre de pixels dans les directions horizontale et verticale. Si elle 
se deplacait plus loin horizontalement ou verticalement, nous obtiendrions un mouve- 
ment circulaire aplati, c'est-a-dire une trajectoire elliptique. Changez done l'une des 
deux valeurs (100) par un nombre plus grand ou plus petit et vous obtiendrez une 
animation differente. 



Accelerer ou ralentir le mouvement 

Si vous avez utilise un gestionnaire ENTER_FRAME pour executer votre code en continu 
(notamment 1' incrementation de la valeur de la variable valeurCroissante de notre exem- 
ple), la vitesse d'execution de votre animation depend du nombre d'images par seconde 
de votre fichier .fla. Si vous utilisez la classe Timer ( ), vous pouvez preciser l'intervalle 
temps entre deux repetitions. 

II existe une autre technique qui consiste a effectuer un calcul plus precis du cosinus et/ou du 
sinus afin d'obtenir plus de valeurs pour positionner votre occurrence. Plus le pas de 
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la variable servant de base au calcul du cosinus et/ou du sinus (+ 0.1 dans notre exemple) 
est important, plus rapide sera le mouvement ; en revanche, moins il sera precis. 

Mouvement pendulaire 

Fichier de reference : Chapitre5/cossin3.fla 

Un mouvement pendulaire est tres proche d'une trajectoire circulaire. Ce qui differencie 
ces deux trajectoires est le traitement applique au calcul de la position verticale. 

En observant l'animation de l'adresse ci-dessous, vous pouvez constater que les deux 
occurrences noire et rouge passent toutes les deux au-dessus de l'axe des abscisses. 

http://www.yazo.net/index.php?option=com_content&task=view&id=32&Itemid=47 

Nous devons reussir a les conserver sous cet axe, ce qui peut etre obtenu facilement en 
utilisant la fonction mathematique qui renvoie une valeur absolue : Math . abs ( ) . Par exemple, 

Math.abs(-23,5) donne 23,5. 

var valeurCroissante:Number = 0; 

pi anete.addEvent Li stener( Event. ENTER_FRAME, mouvement Lineal re) ; 

function mouvementLineaire(evt:Event) { 
valeurCroissante+=0.05; 

evt.currentTarget.x=250+(Math.sin(valeurCroissante)*50) j 
e vt.currentTarget.y=150+( Math. abs (Math. cos (valeurCroissante) )*50) ; 

} 

Le fait de placer M a t h . c o s ( ) dans la fonction M a t h . a b s ( ) , nous permet d ' obtenir une valeur 
positive. 

Pour obtenir un mouvement pendulaire au-dessus de l'axe des abscisses, il suffit de rendre 
negatives toutes les valeurs calculees. II suffit done de les multiplier par -1. Dans la 
mesure oil nous effectuons deja une multiplication dans notre calcul, remplacons simple- 
ment 50 par -50. 

Effet pulse 

Fichier de reference : Chapitre5/cossin3.fla 

Qui n'a jamais vu un Macintosh avec sa veille lumineuse qui respire ? Pour obtenir un 
effet d'occurrence qui devient de plus en plus transparente avant de redevenir opaque 
puis de recommencer perpetuellement ce cycle, donnant ainsi l'impression de pulsions, il 
vous suffit de partir du script du mouvement pendulaire. La combinaison d'une fonction 
sinus ou cosinus avec une valeur absolue permet d' obtenir une serie de nombres que vous 
pouvez alors utiliser avec la propriete alpha. 
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Fichier de reference : Chapitre5/cossin3.fla 
var valeurCroissante:Number = 0; 

spot. add Even t Li stener( Event. ENTER_FRAME,mouvement Li nea ire) ; 

function mouvementLineairetevt: Event) { 

valeurCroissante+=0.05; 

evt.currentTarget.al pha = Math.abs(Math.cos(valeurCroissante)) ; 
} 

Ajoutons que vous pouvez egalement utiliser les proprietes seal eX et seal eY pour obtenir 
le meme effet en faisant varier l'echelle d'une occurrence et non plus sa transparence. 



Remarque 

Consultez egalement, au debut de ce chapitre, le developpement dedie a I'evenement ENTER_FRAME qui 
fait reference a deux autres exemples a travers les points Obtenir un mouvement sinueux et Saccader un 
mouvement. 



Mouvement d'une planete 

Apres avoir analyse ensemble tous les scripts lies aux calculs de cosinus et sinus dans les 
exemples precedents, voici un script que vous devriez comprendre sans difficulte. 

Fichier de reference : Chapitre5/cossin3.fla 

var valeurCroissante:Number = 0; 



planete. add Event Listener (Event. ENTER_FRAME,mouvementCi rcul aire) ; 

function mouvementCirculaire(evt:Event) { 
va1eurCroissante+=0.07; 

evt. cur rentTarget.x=250+( Math. cos (valeurCroissante)*200) ; 
evt.currentTarget.y=130+(Math.sin(valeurCroissante)*50) ; 

evt.currentTarget.scaleX=0.5+( (evt.currentTarget.y-80)/130) ; 
evt.currentTarget.scaleY=0.5+( (evt.currentTarget.y-80)/130) ; 



evt.currentTarget.alpha=0.3+( (evt.currentTarget.y-80)/130) ; 
} 

II s'agit d'un mouvement classique qui n'est pas uniquement utilise pour la representation 
des mouvements des planetes du systeme solaire, mais egalement pour afficher plusieurs 
images sur la scene d'une animation. 

Pour obtenir l'effet escompte, nous avons simplement ajoute deux lignes d' instructions 
qui permettent de regler l'echelle de l'occurrence qui tourne en fonction de sa position 
verticale ; nous avons egalement revu a la baisse le rayon vertical afin d' obtenir un 
mouvement elliptique. 
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Deplacement dune occurrence dun point a un autre de la scene 

Pour le dernier developpement de ce chapitre, nous avons souhaite regrouper sur cette page, 
deux scripts qui permettent de deplacer une occurrence a l'endroit d'un clic de la souris 
sur la scene. 

II s'agit de lignes de code que vous avez deja rencontrees dans ce livre dans des exemples 
plus ou moins similaires. 

Nous devons commencer par gerer le clic sur la scene avec le gestionnaire suivant : 

stage.addEventl_istener(MouseEvent .CLICK, depl acerOccurrence) ; 
function deplacerOccurrence (evt:MouseEvent) { 

} 



Remarque 

Dans cet exemple, nous faisons reference a la propriete stage de I'animation (thi s) et non a une quel- 
conque instance intitulee stage. Rappelons que chaque occurrence sur la scene possede cette propriete. 



Nous devons ensuite ecrire le code charge de deplacer de facon continue 1' occurrence en 
faisant appel aux proprietes x et y. Deux possibilites s'offrent a vous. 

Premiere possibilite, vous utilisez un gestionnaire qui fait appel a l'evenement ENTER_FRAME 
ou vous faites appel a la classe Timer( ). Dans les deux cas vous ferez reference aux 
proprietes x et y de 1' occurrence a deplacer. 

Deuxieme possibilite, vous faites appel a la classe Tween( ) ; precisons que cette derniere 
solution est preferable dans la mesure ou le choix d'effet dans le mouvement est facilement 
parametrable. 

Script avec la classe TweenO : 

import fl .transitions. easing.*; 
import fl .transitions .*; 

var mouvementX:Tween; 
var mouvementY:Tween; 

stage. addEvent Li stener(MouseEvent. CLICK, depl acerPuce) ; 

function deplacerPuce(evt:MouseEvent) { 

mouvementX = new Tween(puce,"x" .Strong. easeOut, puce. x.mouseX, 1.5, true) ; 

mouvementY =new Tweentpuce, "y" , St rong. easeOut, puce. y.mouseY, 1.5, true) ; 
} 

Script avec un gestionnaire de type Event et l'evenement ENTER_FRAME : 

I var destX:Number; 
var destY:Number; 
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stage.addEvent Li stener(MouseEvent.C LICK, deplacer Puce) ; 

function deplacerPuce(evt:MouseEvent) { 
destX=mouseX; 
destY=mouseY; 
puce. add Event Li stener( Even t.ENTER_FRAME, a vancerBal le) ; 

} 

function avancerBal le(evt:Event) ( 
puce.x+=(destX-puce.x)*0.1; 
puce.y+=(destY-puce.y)*0.1; 

if (Math.abs(destX-puce.x) + Math.abs(destY-puce.y) < 2 ) ( 
puce. remove Event Li stenert Event. ENTER_FRAME, avancerBal le) ; 



Si vous faites appel a un gestionnaire de type Event avec l'evenement ENTER_FRAME, pensez 
a executer la fonction removeEventLi stener( ) lorsque votre occurrence a termine sa trajec- 
toire. Vous noterez que pour evaluer la proximite de l'occurrence a son point de destina- 
tion, nous verifions si elle se trouve a moins d'un pixel de distance du clic de la souris. 
Dans la mesure ou la soustraction risque de renvoyer une valeur negative (destx-puce.x), 
nous en prenons la valeur absolue. 

Adaptons une derniere fois le script ci-dessus afin que l'occurrence suive perpetuellement le 
curseur de la souris. 

stage.addEvent Li stener(MouseEvent. CLICK, deplacer Puce) ; 
function deplacerPuce(evt:MouseEvent) { 
puce. add Event Li stener( Even t.ENTER_FRAME, a vancerBal le) ; 

) 

function avancerBal le(evt:Event) ( 

puce.x+=(mouseX-puce.x)*0.1; 

puce.y+=(mouseY-puce.y)*0.1; 
} 

Retirez eventuellement le gestionnaire MouseEvent afin que l'occurrence puce suive le 
curseur de la souris des le lancement de 1' animation. 

puce. add Event Li stener( Event. ENTER_FRAME, a vancerBal le) ; 

function avancerBal le(evt: Event) ( 

puce.x+=(mouseX-puce.x)*0.1; 

puce.y+=(mouseY-puce.y)*0.1; 
} 

Dans ce dernier exemple, il est preferable d'utiliser ce script plutot que des lignes 
d' instructions faisant appel a la classe Tween( ). 
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La construction 
d'une interface sur la scene 



Quel que soit votre niveau en ActionScript, au debut de chaque nouvelle production, vous 
vous interrogerez toujours sur la maniere de concevoir une animation. Vous pouvez par 
exemple simplement glisser-deposer des symboles sur la scene et des images-cles tout au 
long du scenario, mais plus vos besoins en matiere d'interactivite seront grands, plus il 
sera necessaire d'eviter une telle methode. 

Lorsque vous ne connaissiez pas 1' ActionScript, le seul moyen de realiser la mise en page 
des differentes parties de votre animation etait de faire appel a FIDE de Flash. Vous utilisiez 
alors principalement les regies de la scene, la palette Aligner, les copier-coller d'occur- 
rences, la manipulation d' images et d' images-cles, en resume, tout ce qui vous permettait 
de manipuler l'interface sans avoir a utiliser 1' ActionScript. 

A l'oppose, certains developpeurs chevronnes vont jusqu'a se passer de l'interface de 
Flash et n'utilisent que des fichiers externes sans manipuler le moindre symbole. Outre le 
plaisir eprouve a ne manier que des lignes de code, ce mode de developpement s'avere 
tres rapidement plus efficace et plus optimise (gestion du temps de production et des 
mises a jour d'un projet). 



Demonstration 



Pour illustrer notre propos, nous avons realise une serie de trois animations qui repondent 
toutes au meme besoin : utiliser une barre de navigation laterale pour pouvoir changer le 
contenu central de 1' animation (un simple texte dans notre exemple). 
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Accueil 




Figure 6-1 

Cette interface va etre obtenue a partir de methodes toutes tres differentes les unes des autres. 

Pour chacun de ces trois exemples, nous allons presenter l'etat de la scene avant la publi- 
cation, la bibliotheque, le scenario et le script principal qui gere 1' interactivity; de 
1' animation. Vous allez decouvrir que les methodes employees sont reellement toutes tres 
differentes. 

Construction a base de symboles glisses sur la scene 

Fichier de reference : Chapitre6/ConstructionStatique.fla 

Etat de la scene : tous les elements qu'elle contient ont ete places en saisissant des 
symboles de la bibliotheque pour venir les deposer a differents endroits sur la scene, 
c'est-a-dire par une technique de glisser-deposer. Les textes des boutons ont ete crees 
directement sur la scene a l'aide de l'outil texte. L' ombre du logo a ete ajoutee a partir de 
1' interface de Flash en faisant appel a la palette Filtres (fig. 6-2). 

Contenu de la bibliotheque : tous les elements utilises dans la construction de 1' interface 
sont presents dans la bibliotheque. Seuls les textes des boutons n'y figurent pas car ils ont 
ete crees sur la scene, comme nous le precisions ci-dessus (fig. 6-3). 

Aspect du scenario : notre animation possede cinq boutons sur l'ecran du sommaire. Avec 
cette technique de construction d'une interface et, plus globalement, d'une animation, le 
scenario possede de ce fait six images-cles espacees les unes des autres (fig. 6-4). 



Remarque 

Les images-cles sont espacees les unes des autres afin que vous puissiez, sans difficulte, en inserer une 
nouvelle, lorsque le besoin se presente. 
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Figure 6-2 

Les elements que contient la scene montrent deja I ' apparence qu 'aura I 'animation apres publication. 
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Figure 6-3 

La bibliotheque possede tous les symboles utilises dans V animation avant sa publication. 
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Figure 6-4 

Chaque ecran de V animation correspond a une image-cle. 
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Script de l'image-cle 1 : il contient uniquement des lignes d'instructions relatives a la 
navigation au sein de 1' animation. 

Stop( ) ; 



btCouleurs. add Event Li stenertMouseEvent. CLICK, allerlmage5) ; 
btTy pographie. add Event Li stener(MouseEvent. CLICK, a 1 lerlmagelO) ; 
bt Image Fixe.addEvent Listener (Mouse Event. C LI CK.al lerlmagel5) ; 
btAn i ma ti on. addEvent Listener (Mouse Event. C LI CK.al lerlmage20) ; 
bt Video. addEvent Listener (Mouse Event. CLICK, allerlmage25) ; 

function al lerImage5(evt:MouseEvent) { 

gotoAndStop(5) ; 
} 
function al lerlmagelOtevt :MouseEvent) { 

gotoAndStop(lO) ; 
} 
function al lerImagel5(evt:MouseEvent) { 

gotoAndStop(15) ; 
} 
function al lerImage20(evt:MouseEvent) { 

gotoAndStop(20); 
} 
function al lerlmage25(evt :MouseEvent) { 

gotoAndStop(25) ; 
} 

Conclusion : cet exemple tend a demontrer qu'il devient tres rapidement fastidieux de 
construire une interface par glisser-deposer de symboles et par creation d' images-cles. 
L' exemple aurait ete encore plus flagrant si nous avions eu a gerer une quinzaine de 
boutons. En revanche, cela demontre qu'il est facile de realiser une animation contenant 
plusieurs ecrans a partir de multiples images-cles, des lors que vous connaissez un minimum 
de manipulations dans TIDE de Flash. 



Symbole avec liaison et utilisation de la Timeline 

Fichier de reference : Chapitre6/ConstructionDynamique.fla 

Dans ce deuxieme fichier, 1' animation est en partie construite dynamiquement. L' inter- 
face est en effet obtenue par l'execution de lignes d'instructions qui generent les boutons 
en marge gauche. L'affichage des differents ecrans de 1' animation est obtenue, comme 
dans 1' exemple precedent, par navigation entre les differentes images-cles du scenario. 

Etat de la scene : comme vous pouvez le constater, a la difference du premier fichier, les 
boutons de navigation ne figurent plus dans le panneau lateral gauche, car ils vont etre 
places dynamiquement sur la scene. 
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Accueil 



Figure 6-5 

La construction du sommaire est obtenue, enpartie, grace a V execution de lignes d 'instructions. 

Contenu de la bibliotheque : seul le symbole intitule Bouton Navigation a ete modifie par 
rapport a l'exemple precedent. Nous lui avons ajoute un texte dynamique. 
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Figure 6-6 

La bibliotheque possede toujours tous les symboles utilises dans V animation avant sa publication. 



Aspect du scenario : dans ce deuxieme exemple, nous ne cherchons toujours pas a cons- 
truire dynamiquement le contenu des differents ecrans de 1' animation ; nous utilisons 
done encore les images-cles pour en construire les differentes parties. Le scenario est le 
meme que celui de l'exemple precedent (figure 6-4). 
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Script de l'image-cle 1 : le script principal de l'animation est charge de gerer la navigation 
entre les differentes images, mais il sert egalement a construire une partie de l'interface 
de l'animation : la barre de navigation. 

StopO; 

var serieBoutons=["btCouleurs", "btTypographie" , "btlmageFixe" ."btAnimation" ."btVideo"]; 
var numeroEntree: Number; 

for (var entree: String in serieBoutons) { 

numeroEntree = Number(entree) ; 

var bouton:BoutonNavigation = new BoutonNavigationC) ; 

bouton.name=entree; 

bouton.x=50; 

bouton.y=100+(numeroEntree*30) ; 

bouton.etiquette.text=serieBoutons [numeroEntree]. substr( 2, 20) ; 

addChild(bouton) ; 

bouton.numeroImage=5+(numeroEntree*5) ; 

bouton.addEventListener(MouseEvent.CLICK.deplacerTete) ; 
} 

function deplacerTete(evt:MouseEvent) { 

gotoAndStop(evt.currentTarget.numeroImage) ; 
} 

Conclusion : cet exemple illustre qu'il est souvent interessant de combiner manipulation 
de l'interface de Flash et gestion du code lorsqu'on ne maitrise pas suffisamment le 
langage ActionScript. Le codage de la construction de la barre de navigation est un gain 
de temps notable. 

Construction d'une animation a partir d'un fichier externe 

Fichiers de reference : Chapitre6/ConstructionFichierAS.fla, logo.png, main. as, import- 
Image, as et Tracer Rectangles .as 

Dans ce troisieme et dernier fichier, l'animation est integralement construite dynamique- 
ment. Cela signifie que l'interface est obtenue par l'execution de lignes d' instructions en 
ActionScript, contenues dans des fichiers externes d'extension .as. 

Etat de la scene : elle ne contient rien. 

Aspect du scenario : il ne contient rien 

Contenu de la bibliotheque : elle contient un symbole et une police de caracteres, mais 
cette derniere aurait pu etre importee dans l'animation a partir de l'execution d'une ligne 
d'instruction. Par ailleurs, le seul et unique symbole de l'animation aurait pu ne pas se 
trouver dans la bibliotheque : sa construction aurait pu etre obtenue a partir d'un script en 
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AS. Nous avons simplement souhaite montrer qu'il etait possible de faire appel a un 
symbole de la bibliotheque a partir d'un fichier externe. 
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Figure 6-7 

Ces elements sont presents dans la bibliotheque dans le seul but de demontrer qu 'un symbole pent etre appele 
a partir d'un fichier externe. 



Script de l'image-cle 1 : il n'y en a pas. En revanche, nous avons cree trois fichiers AS 
dont voici le contenu. 

Fichier de reference : Chapitre6/main.as 

package { 

import fl ash. display. Sprite; 

import flash.display.MovieClip; 

import flash. events. MouseEvent; 

import fl ash. text. TextField; 

import f lash. text. Text Fi el dAutoSize; 

import fl ash. text. TextFormat; 

import fl ash. text. Text FormatAl i gn ; 

public class main extends Sprite { 

publ 1c var serieBoutons=["btCouleurs" , "btTypographie" , "bt Image Fixe" , 

^►"btAnimation" ,"bt Video"] ; 

public var numeroEntree: Number; 

public var titre:TextField; 

public var styleEnTitre:TextFormat; 

public var marge:Sprite; 

public var corps:Sprite 
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public var barreMarge:TracerRectangle; 
public var logo: Importlmage; 

function main( ) { 

marge = new SpriteO ; 
corps = new SpriteO ; 
corps. x=100; 

addChild(marge) ; // Place apres la fonction ConstruireBarreLateralePrincipale 
addChild(corps) ; // cela fonctionne quand meme car les objets sont crees, 
mais pas encore affiches 



Construi reBarreLateralePrincipale( ) ; 



private function Construi reBarreLateralePrincipalet ) { 

barreMarge = new TracerRectangletO, 0,100, 400, "0xE29366") ; 
marge. addChild(barreMarge) ; 

logo = new ImportImage( "logo.png") ; 

logo.x=25; 

logo.y=10; 

marge. addChild(logo) ; 

for (var entree:String in serieBoutons) { 
numeroEntree=Number(entree) ; 

var bouton:BoutonNavigation=new BoutonNavigation( ) ; 
bouton.name=entree; 
bouton.x=50; 

bouton.y=100 + numeroEntree * 30; 

bouton.etiquette.text=serieBoutons[numero Entree] .substr(2,20) 
marge. addChild(bouton) ; 
bouton.numeroImage=5 + numeroEntree * 5; 
bouton.addEventListener(MouseEvent.CLICK.chargerEcran) ; 



public function chargerEcran(evt:MouseEvent) ( 

pi acerTit re (evt. cur rentTarget. etiquette. text) ; 
} 
public function pi acerTitre(nomTitre) { 

//removeChild(marge) Pour faire disparaltre la barre avec les boutons 

if (titre != null) { 

corps. removeChildt titre) ; 
} 

titre=new TextFieldO; 
titre.name="zoneDeTitre" ; 
titre. text=nomTitre; 
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titre.x=50; 

titre.y=30; 

titre.selectable=false; 

titre.width=350; 

titre.autoSize=TextFieldAutoSize. LEFT; 

t i tre . embedFonts=true ; 

corps. addChi 1 d(ti tre) ; 

styleEnTitre=new TextFormat( ) ; 

styleEnTitre.color="0xC44F10"; 

styleEnTitre.size=24; 

styleEnTitre.al ign=TextFormatAl ign. RIGHT; 

styleEnTitre.font="Hel vetica Neue Black Condensed" 

titre.setTextFormat(styleEnTitre) ; 

} 
} 
} 

Fichier de reference : Chapitre6/ImportImage.as 

package { 

import fl ash. display. Sprite 
import flash. net. URLRequest 
import fl ash. display. Loader 

public class Importlmage extends Sprite { 

private var nomlmage: String; 
private var chargeur: Loader; 
private var adresseImage:URLRequest; 

function Importlmage(nomlmage) { 
adresselmage = new URLRequest(nomlmage) ; 
chargeur = new LoaderO; 
chargeur. load (adresselmage) ; 
addChild(chargeur) ; 
} 
} 
} 

Fichier de reference : Chapitre6/TracerRectangle.as 

package { 

import fl ash. display. Sprite; 
import fl ash. geom. Rectangle; 
import flash. display. Shape; 

public class TracerRectangle extends Sprite { 

private var origineX:Number; 
private var origineY:Number; 
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private var 1 argeur:Number 
private var hauteur:Number 
private var couleur:String 

function TracerRectangle(origineX,origioneY,l argeur.hauteur.couleur) { 

var square:Shape=new ShapeO; 

square. graphics .beginFil 1 (couleur.l) ; 

square. graphics . drawRect(origineX,origineY,largeur, hauteur) ; 

addChild(square); 
} 



} 
} 

Conclusion : cette animation met en evidence que la construction d'une interface et 
d'une animation peuvent etre conduites sans utiliser TIDE de Flash. II est vrai que pour 
faire appel a une telle methode, il est necessaire de bien connaitre 1' ActionScript et/ou un 
langage de programmation oriente objet. Cela dit, en possession de ces connaissances, 
vous decouvrirez tres rapidement que la manipulation de 1' interface du logiciel ralentit la 
production de vos projets. Par ailleurs, la mise a jour d'un projet qui utilise ce mode de 
developpement est plus souple. Ann que cet exemple puisse etre accessible a un plus 
grand nombre, nous n'avons pas voulu faire appel a un fichier XML, ce qui aurait ete plus 
judicieux pour stacker des informations relatives a chacun des 6 ecrans, c'est-a-dire le 
contenu du sommaire et celui des cinq parties de notre animation. 



Symbole glisse vers la scene (environnement auteur) 

Glisser-deposer un symbole sur la scene est la methode la plus accessible aux neophytes 
en programmation ! lis peuvent tres facilement construire differents ecrans (sur des 
images-cles) tout au long du scenario d'une animation sans qu'il soit necessaire de saisir 
la moindre ligne d' instruction. Leur besoin en matiere d'interactivite s'arrete generalement 
au controle de la tete de lecture d'une animation pour visualiser ces differents ecrans. 

Pour pouvoir glisser-deposer des symboles sur la scene, il faut avoir effectue, au prealable, 
un travail d' importation de medias. Ceci a pour consequence d'alourdir plus ou moins le 
poids des fichiers .fla et .swf. Meme si aujourd'hui les debits d'Internet permettent le 
transfert de plusieurs mega-octets en quelques secondes ou minutes, il est souvent inutile 
d'imposer a un utilisateur le chargement integral d'une animation, surtout si celle-ci 
comporte de nombreux medias. 

Nous avons evoque, au debut de ce chapitre, la notion de mise a jour. Or, il s'avere 
impossible de mettre a jour une animation construite par glisser-deposer de symboles. 
Relativisons notre propos : rien ne vous empeche d'ouvrir un fichier Flash (dont l'extension 
est .fla) que vous auriez realise quelques temps auparavant, pour importer de nouveaux 
medias et/ou changer la dispositions des occurrences sur la scene. Cependant, si les 
mises a jour doivent se repeter frequemment, cette operation devient tres vite fastidieuse. 
L'avantage de faire appel a des lignes de code en ActionScript pour gerer la construction 
et l'interactivite d'une animation est justement d'eviter la reouverture d'un fichier Flash 
qui doit etre mis a jour. 
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La methode de construction d'une animation qui consiste done a faire principalement 
appel a la timeline (le scenario) pour creer les differents ecrans d'un projet a base de glisser- 
deposer de symboles sur la scene a ses limites ! Comme nous l'evoquions ci-dessus, des 
que vous devrez gerer des medias tels que la diffusion de sons ou la consultation de 
videos au sein d'une animation, il sera indispensable d'utiliser la programmation. 

En conclusion, nous ne conseillerions cette methode de developpement d' animation qu'a 
des personnes dont les besoins en matiere de programmation sont tres limites. Elle peut 
egalement constituer une solution pour un developpement rapide d' animations relative - 
ment simples ou bien pour les personnes qui ne parviennent pas a programmer en dehors 
des notions de base. 

Methodologie de developpement 

Supposons que vous n'ayez pas le temps d'apprendre en detail la programmation en AS3, 
mais que vous souhaitiez tres rapidement etre capable de realiser une animation interactive 
comme celles que nous vous avons presentees (le premier exemple, Chapitre6/Construction- 
Stati que . f 1 a). Voici une procedure pour vous aider dans votre premiere realisation. 

Pour commencer, effectuez une arborescence rapide de votre animation ou un storyboard, 
pour en determiner le nombre d' ecrans total. 

1. Creez tout d'abord un nouveau document Fichier Flash (AS 3.0). 

2. Enregistrez votre animation. 

3. Reglez les parametres de votre animation (largeur et hauteur de la scene, couleur et 
reglez la cadence a 50 ips). 

4. Creez les symboles dont vous aurez besoin dans votre animation. 

5. Importez egalement les differents medias que vous utiliserez dans les differentes 
images-cles de votre animation. 

6. Au niveau du scenario (la timeline), creez, sur un ou plusieurs caiques, les elements 
du decor, tout du moins les parties de 1' interface graphique qui se repetent d'un ecran 
a l'autre. Ces caiques devront se situer sous les autres. 



Remarque 

Pensez a etendre vos caiques de fond sur autant d'images que necessaire. Prenez exemple sur la copie 
d'ecran de la figure 6-4 (Logo, Boutons et Barre de Marge). 



7. Nommez les occurrences sur lesquelles l'utilisateur final devra cliquer pour deplacer 
la tete de lecture dans 1' animation. Rappelons que le nom d'une occurrence ne doit 
pas commencer par une majuscule et ne peut contenir de caracteres accentues ou 
speciaux. N'utilisez pas non plus d'espace. 

8. Placez l'instruction stopO sur l'image-cle de votre animation qui contient la page 
sommaire. 
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9. Utilisez ensuite le script ci-dessous, que vous devez repeter autant de fois que vous 
avez de boutons, pour deplacer la tete de lecture sur les differentes images-cles de 
votre animation. 

btEcranl.addEventListener(MouseEvent.CLICK,al lerlmagelO) ; 

function al lerImagelO(evt:MouseEvent) { 

gotoAndStop(5) ; 
} 

Nous vous rappelons qu'il est fortement conseille de laisser de nombreuses images vides 
entre les images-cles afin de pouvoir inserer d'eventuelles images-cles. 



Conseil 

Utilisez le raccourci clavier F6 pour pouvoir inserer des images-cles. 



Symbole avec liaison place sur la scene en AS 
(environnement auteur) 

Pour realiser la mise en pages d'une animation dans l'interface de Flash, vous devez 
construire tous les ecrans, l'un apres 1' autre, faire glisser des symboles sur la scene et 
utiliser des outils de creation. Mais dans certains cas, le placement de nombreuses occur- 
rences sur la scene peut s'averer fastidieux voire meme impossible. 

Pour pallier ce probleme, la solution est extremement simple : utilisez des symboles avec 
liaison, accompagnes de l'operateur new et de la methode addChi 1 d( ). 

Une fois n'est pas coutume, sans meme introduire cette notion ou vous la presenter, 
commencons par une demonstration, que nous vous conseillons de suivre en meme temps 
en creant prealablement un nouveau fichier Flash. 

1. Realisez dans un clip 1' animation d'une taupe qui sort de son trou (placez l'instruc- 
tion stop( ) sur la derniere image-cle). 

2. Effectuez un clic droit sur ce symbole dans la bibliotheque et selectionnez la 
commande Liaisons. 

3. Cochez la case Exporter pour ActionScript et donnez un nom de Classe (debutez ce 
nom par une majuscule sans utiliser de caracteres accentues ou speciaux, ni meme 
d'espace). 

4. A present, nous devons placer ce clip sur la scene. Pour cela, nous utilisons le script 
ci-dessous sur 1' image-cle 1 de notre animation, afin de generer dynamiquement une 
occurrence sur la scene. 

Fichier de reference : Chapitre6/Taupel_and.fla 

var taupel = new TaupeAnimee( ) ; 
taupel.x=300; 
taupel. y=200; 
addChild(taupel); 
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Sans le savoir, vous venez de suivre la procedure qui permet de placer un symbole dyna- 
miquement sur la scene ! 

Grace a ce code, a chaque lancement de 1' animation, la taupe vient se placer au centre de 
la scene. 

Revenons sur cette procedure, qu'il est indispensable de bien connaitre, car c'est celle 
que vous devrez utiliser lorsque vous devrez placer un ou plusieurs symboles dynamique - 
ment sur la scene. Prenons done un nouvel exemple, celui d'une barre de menus, pour 
decouvrir que la technique est toujours la meme. 

Avant de nous lancer dans une procedure pas a pas, il est important de comprendre qu'un 
symbole doit posseder un nom de classe pour pouvoir etre place sur la scene a l'aide de 
l'operateur new et de la methode addChildO. Dans l'exemple precedent, nous avions 
defini un nom de classe apres avoir cree le symbole ; dans celui-ci, nous allons le faire au 
moment de la creation. 

Fichier de reference : Chapitre6/ConstructionDynamique2 

1. Pour creer un nouveau symbole de type Clip, commencez par tracer sur la scene un 
trait realise au crayon (ou tout autre element graphique). II s'agit d'un trait de souli- 
gnement. 

2. Ajoutez ensuite un texte dynamique au-dessus de ce trait et incorporez-y les caracte- 
res a utiliser. Employez le bouton Integrer dans la palette Proprietes (consultez le 
chapitre 14 dedie au texte dans Flash). Nous donnons alors un nom d' occurrence au 
texte dynamique, comme le nom etiquette dans cet exemple. 



Rappel 

Incorporer les caracteres a un texte dynamique ou de saisie ne sert qu'a s'assurer que la police que vous 
avez choisie sera bien celle que verra I'utilisateur final. 



3. Selectionnez le trait et le texte dynamique et pressez la touche de fonction F8. 

4. Nommez le symbole et, point le plus important, cochez la case Exporter pour 
ActionScript puis donnez un nom de classe. Attention, ce nom doit, de preference et 
par convention, commencer par une majuscule et ne peut surtout pas contenir de 
caracteres speciaux, accentues ou d'espace. Dans notre exemple, nous choisissons le 
nomde classe BoutonMenuPrincipal. 

Pour finir, voici le script que nous avons place sur l'image-cle 1 du scenario principal de 
P animation. 

var boutonParisrBoutonMenuPrincipal ; 
var boutonMilamBoutonMenuPrincipal ; 
var boutonl_ondres:BoutonMenuPrincipal ; 

boutonParis = new BoutonMenuPrincipal (); 
boutonMilan = new BoutonMenuPrincipal (); 
boutonLondres = new BoutonMenuPrincipal (); 
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boutonParis.etiquette.text=" Paris" ; 
boutonMilan.etiquette.text="Milan" ; 
boutonLondres . etiquette. text="Londres" ; 

addChild(boutonParis) ; 
addChild(boutonMilan) ; 
addChild(boutonLondres) ; 

boutonParis.x = 50; 
boutonMilan.x = 210; 
boutonLondres .x = 370; 

boutonParis.y = boutonMilan.y = boutonLondres. y = 15; 

Nous commencons par declarer trois noms d'instances de la classe BoutonMenuPrincipal 
puis nous procedons a leur instanciation. 

Souvenez-vous que le symbole contient un texte dynamique intitule etiquette ; nous 
renseignons done la propriete text de cette instance. 

Pour finir, nous faisons appel a la methode addChi 1 d( ) pour placer ces instances dans la 
liste d'affichage et nous definissons les valeurs des proprietes x et y de chaque instance. 



Remarque 

Si vous ne souhaitez pas ou ne savez pas importer une police dans une animation Flash, la technique que 
nous venons d'utiliser peut done vous aider, car ('encapsulation d'une police se fait lors de I'etape d'inte- 
gration des caracteres. 



Script dans un fichier AS 

Fichiers de reference : Chapitre6/ConstructionDynamique3AS.fla et Chapitre6/mainDynami- 
que.as 

Le script ci-dessous se trouvedans le fichier texte nomme ma in Dynamique. as. II s'agitdela 
classe du document ConstructionDynamique3AS.fla 

package { 

import flash. display. Sprite; 

public class mainDynamique extends Sprite ( 

var boutonParis:BoutonMenuPrincipal ; 
var boutonMil an: BoutonMenuPrincipal ; 
var boutonLondres:BoutonMenuPrincipal ; 

function mainDynamique( ) { 

boutonParis=new BoutonMenuPrincipal ( ) ; 
boutonMil an=new BoutonMenuPrincipal ( ) ; 
boutonLondres=new BoutonMenuPrincipal ( ) ; 
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bouton Pa ris.etiquette.text=" Paris" ; 
boutonMil an.etiquette.text="Milan" ; 
bouton Londres.etiquette.text="Londres" ; 

addChild(boutonParis) ; 
addChild(boutonMilan) ; 
addChild(boutonLondres) ; 

boutonParis.x=50; 
boutonMilan.x=210; 
bouton Londres.x=370; 

boutonParis.y=boutonMilan.y=boutonLondres.y=15; 



} 

Comme vous pouvez une fois de plus le constater, le code contenu dans ce fichier AS est 
identique a celui que nous utilisons dans le script de l'image-cle 1 du scenario principal 
de 1' animation. 



Supprimer une occurrence creee dynamiquement 

Si vous souhaitez retirer de la scene une occurrence que vous avez placee dynamique- 
ment a l'aide de la methode addChildO, nous vous rappelons que vous devez utiliser 
removeChi 1 d( ). Consultez la derniere partie du chapitre 2 qui presente cette methode. 

Creation de traces vectoriels et de textes dynamiques 

Pour construire une interface, nous avons examine, depuis le debut de ce chapitre, de 
nombreux precedes. Voici deux nouvelles techniques qui vont venir completer celles que 
nous connaissons deja : 

• La creation et la gestion d'un texte a partir de classes dediees (TextFieldO, Text- 
Format( ) et bien d'autres). 

• La creation de formes vectorielles a partir de classes dediees (GraphicsO, ShapeO et 
bien d'autres). 

Le chapitre 14 de ce livre traite du texte dans sa globalite ; referez-vous done aux expli- 
cations qui y sont donnees pour apprendre a maitriser ce media. 



Qu'est-il possible de realiser a base de traces vectoriels ? 

La reponse a cette question et tres simple : des formes vectorielles ! Cela sous-entend 
done aussi bien de simples droites que des traces plus complexes a base d'une multitude 
de courbes et de droites. Pour tracer des carres, des rectangles, des rectangles a coins 
arrondis, des cercles et des ellipses, il existe deja des methodes predefinies (de la classe 
GraphicsO), vous n'aurez done pas besoin d'ecrire de scripts et/ou de calculs de cosinus 
pour ces formes, comme nous le faisions en AS 1/2. 
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Remarque 

Celles et ceux qui connaissent les methodes moveToO et lineToO en AS1/2, vont etre surpris de 
decouvrir que les techniques de manipulation des formes vectorielles n'ont pas change en AS3. Vous allez 
simplement devoir ajouter la propriete graphi cs devant les methodes que vous aviez I'habitude d'utiliser. 



Definition 

Un trace vectoriel peut prendre n'importe quelle forme, mais il se caracterise avant tout 
par le fait qu'il possede un fond et/ou un contour. Tous deux peuvent etre de couleur unie 
plus ou moins transparente, mais seul le fond peut etre rempli d'un degrade, d'un motif 
ou d'une image. 

II est souvent plus simple de tracer une forme a l'aide des outils de dessin prevus a cet 
effet dans la barre d' outils de 1' interface de Flash, mais dans certains cas, il est impossi- 
ble d'anticiper la position et 1' aspect d'un trace. Sans meme parler de graphiques de 
representation (diagrammes, histogrammes, camembert, etc.), il sera parfois necessaire 
de tracer une simple droite ou une courbe entre deux points, d'entourer une zone de 
l'interface d'un cercle ou d'une autre forme, ou bien meme d'encadrer une image selec- 
tionnee. Vous avez peut-etre deja du effectuer ces operations et la seule solution que vous 
avez trouvee a ete de creer un symbole place dynamiquement sur la scene. Vous allez 
decouvrir qu'avec quelques lignes de code, il est tres simple de tracer une droite. 



Tracer une droite 

Fichier de reference 



Chapitre6/tracel.fla 



Sur la copie d'ecran de la figure 6-8, nous vous presentons l'interface habituelle des exer- 
cices de ce livre, mais celle-ci est traversee par une ligne droite. II s'agit d'un trace vectoriel 
obtenu a l'aide du script ci-dessous : 
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Figure 6-8 

Le trait vertical central sur la scene de cette animation a ete trace en ActionScript. 
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var 1 igneSeparation:Shape = new ShapeO; 

1 igneSeparation.graphics.lineStyle(4,0xFFFFFF,l) ; 
1 i gneSepa ra t ion. graph ics.moveTo( 250,0) ; 
1 i gneSepa rat ion. graph ics.l ineTo(250,277) ; 

addChildd i gneSepa rati on) ; 

La creation d'une forme vectorielle debute par l'instanciation de l'une des trois classes 
suivantes : ShapeO, MovieClipO ou SpriteO. Cela vous permet ensuite d'y rattacher un 
trace vectoriel. Dans notre exemple, dans la mesure ou il s'agit d'une simple droite, nous 
ne pouvons definir qu'un style de trait mais pas d'attributs de fond. 

1 i gneSepa rat ion. graph ics.l ineStyle(4,0xFFFFFF,l) ; 

Cette premiere methode, qui definit les caracteristiques d'un trait, contient trois parametres 
qui servent a configurer respectivement les trois points suivants : 

• L'epaisseur du trait, exprimee en pixels. 

• La couleur du trait, exprimee en valeur hexadecimale. 

• Le pourcentage de transparence de la couleur du trait. 



Remarque 

Le pourcentage doit etre defini a partir d'une base decimale : cela signifie que 1 represente 100 %, 0.1 
represente 1 % et 0.5 represente 50 %. 



Une fois 1' aspect du trait defini, nous devons indiquer a Flash son point de depart. Pour 
cela, nous utilisons la methode moveTo( ). Nous vous rappelons que l'origine de la scene, 
les coordonnees x = pixels et y = pixels, se trouve dans le coin superieur gauche. 

Nous devons ensuite definir le point d'arrivee de la droite en faisant appel a la methode 

1 ineTo( ). 



Attention 

La methode 1 i neTo ( ) necessite deux parametres qui specifient les coordonnees d'un point (toujours par 
rapport au coin superieur gauche de la scene) et non une distance. 



Le mot graphics est une propriete commune aux deux classes SpriteO et ShapeO, qui 
permet de faire reference a la classe Graphics (). Celle-ci possede les methodes etproprie- 
tes qui permettent de gerer le dessin vectoriel sur la scene d'une animation (ou dans un 
conteneur). Precisons que la classe MovieClipO herite des methodes et proprietes de la 
classe SpriteO. Elle possede done, par heritage, la propriete graphics. 

Pour pouvoir faire reference aux methodes lineStyleO, moveToO et lineToO, vous devez 
les prefixer du terme graphics. 
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Ce n'est pas termine ! 

En effet, nous avons commence notre script par la creation d'une instance, mais nous ne 
l'avons pas encore ajoutee a la liste d'affichage : nous devons done le faire a l'aide de la 
methode addChildO. 



Tracer une courbe 

Fichier de reference : Chapitre6/tracel0.fla 



Remarque 

Si ce n'est pas deja fait, consultez les explications precedentes relatives a la construction d'une droite, 
avant de poursuivre. 



La technique pour tracer une courbe est simple a mettre en oeuvre mais un peu plus complexe 
a comprendre, surtout si vous ne maitrisez pas les courbes de Bezier ; commencons done 
par vous en rappeler sommairement le principe. 
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Figure 6-9 

La methode curveTof), utilisee en ActionScript, fait appel aux courbes de Bezier pour construire un trace 
qui n'est pas une droite. 
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Remarque 

Aidez-vous du fichier tracebeziers.fi a pour mettre en pratique les explications ci-dessous. Manipulez 
le point D de la figure 6-9 avec I'outil fleche blanche. Cliquez prealablement sur le point A pour faire appa- 
raitre la ligne directrice (definie par le segment allant du point A a D). 



Pour obtenir une courbe, vous devez definir un point de depart et un point d'arrivee (nornmes 
respectivement A et B sur la figure 6-9), puis preciser la direction de la courbure (D, Dl, 
D2 et D3). 

Premier constat : en fonction de la position du point D (appele point directeur), la courbe 
change d' apparence. Vous devez simplement comprendre que plus ce point est eloigne du 
segment qui relie les points A et B, plus 1' amplitude de la courbe est importante (comparez, 
sur la figure 6-9 les courbes avec les lettres D et Dl). 

Deuxieme constat : pour preciser la direction de la courbe, vous devez rapprocher ou 
eloigner ce meme point D de A ou B. Comparez les trois courbes qui possedent les lettres 
D, D2 et D3. La courbe qui possede une courbure penchant vers la gauche a obligatoire- 
ment son point D2 qui se trouve lui-meme plutot vers la gauche (par rapport au point D). 

L'eloignement du point directeur et sa position par rapport aux points A et B suffisent a 
definir la courbure d'un segment. Comment va-t-on pouvoir a present traduire cette logique 
en ActionScript ? En utilisant la methode curveTot ). 

var courbe:Shape = new ShapeO; 
courbe. graphics.l ineStyle( 1,0,1) ; 
courbe. gra phi cs.moveTo( 100, 100) ; 
courbe. graphics.curveTo( 150, 75, 200, 100) ; 
addChild(courbe) ; 

Cette methode possede quatre parametres. Voici deux lignes d' instructions, basees sur la 
figure 6-9, pour vous aider a en comprendre la logique. 

Icourbe.graphics.moveTo(A.x,A.y) ; 
courbe. g ra phi cs. cur veTo(D.x,D.y .B.x.B.y) ; 

La methode moveTo( ) fonctionne de la meme facon que nous l'avons vu pour tracer une 
droite. En revanche, la methode curveToO possede, en quelque sorte, deux points. Les 
deux premieres valeurs definissent les coordonnees x et y du point directeur, alors que les 
deux dernieres definissent le point d'arrivee de la courbe. 

Tracer un carre ou un rectangle 

Fichier de reference : Chapitre6/trace2.fla 

Comme nous l'evoquions precedemment, pour tracer un rectangle ou un carre, il n'est 
plus necessaire de faire appel a plusieurs reprises a la methode 1 i neTo( ), pour tracer une 
serie de droites consecutives formant un quadrilatere. II vous suffit tout simplement 
d'utiliser la methode drawRect( ). 



ActionScript 3 - Programmation sequentielle et orientee objet 



Remarque 

Si vous n'avez pas lu la technique qui permet de tracer une droite, referez-vous a ces explications pour 
comprendre le debut du script ci-dessous. 



var cadre:Shape = new ShapeO; 

cadre.graphics.l ineStyle(4,0xFFFFFF,l) ; 
cadre.graphics.drawRect(70,50,250,125); 

addChild(cadre); 

La methode parle d'elle-meme il suffit d'indiquer des coordonnees, une largeur et une 
hauteur et le rectangle est trace. 

Rappelons que les coordonnees (0, 0) en x et en y se trouvent en haut a gauche de la 
scene. Ainsi, dans notre exemple, nous creons un rectangle de 250 pixels de largeur sur 
125 pixels de hauteur, a 70 pixels du bord gauche et 50 pixels du haut de la scene. 

Attention au piege ! 

Tant que vous n'avez pas besoin de controler ou connaitre les coordonnees d'un rectangle 
que vous avez trace sur la scene, vous ne rencontrerez aucun probleme. En revanche, si 
vous souhaitez modifier sa position, il faudra adapter votre code de la facon suivante : 

var cadre:Shape = new ShapeO; 

cadre.graphics.l ineStyle(4,0xFFFFFF,l) ; 
cadre. graphics. drawRect( 0,0, 250, 125); 

addChild(cadre); 

cadre. x=70; 
cadre. y=50; 

Si cela vous parait illogique, essayons de comprendre ce qui se passe. 

Lorsque nous placons dynamiquement un symbole ou un texte sur la scene, nous utilisons 
l'un des deux scripts suivants : 

I var monNom:Cartouche = new Cartouche (); 
addChild(monNom); 



ou 

I var monNom:TextField = new TextFieldO; 
monNom.text = "David" ; 
addChild(monNom) ; 

Quelles sont generalement les lignes que vous ecrivez ensuite ? Ne serait-ce pas monNom.x 
= une valeur et monNom.y = une val eur pour positionner precisement votre creation ? Dans 
cet exemple, nous n'avons pas place ces lignes d' instructions au debut du script ; voila 
pourquoi il est necessaire d'indiquer les valeurs et pour definir les coordonnees du 
trace d'un rectangle. 
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Recentrer un carre ou un rectangle 

Comme nous venons de vous le faire remarquer, la creation d'un carre ou d'un rectangle se 
fait par rapport au conteneur cible avec la methode add Chi 1 d( ). Ann de mieux comprendre 
cette derniere affirmation, essayez de faire tourner la forme que vous venez de creer. Vous 
visualiserez ainsi l'origne x et y du conteneur dans lequel vous ajoutez l'occurrence. 

var cadre:Shape = new ShapeO; 

cadre. graphics.l ineStyle(4,0xFFFFFF,l) ; 
cadre.graphics.drawRect(70,50,250,125); 

addChild(cadre); 

cad re. addEvent Li stenert Event. ENTER_FRAME, tourner) ; 

function tourner(evt:Event) { 

evt.currentTarget. rotation+=l; 
} 

Le constat est flagrant ! Lorsque la ligne d'instruction addChild(cadre) est executee, le 
conteneur d'objet d'affichage cible est, par defaut, l'animation. Cette derniere ayant ses 
coordonnees (0, 0) en haut a gauche de la scene, la forme est excentree des sa creation. 
Voici le script que vous devriez utiliser pour creer un rectangle (ou tout autre forme 
fermee) dont le point d'alignement est au centre. 

var cadre:Shape = new ShapeO; 

cad re. graphics .1 ineStyled ,0,1) ; 

cadre.graphics.drawRect(-50,-50,100,100); 

addChild(cadre); 

cadre. x=150; 

cadre. y=150; 

cad re. addEvent Li stenert Event. ENTER_FRAME, tourner) ; 

function tourner(evt:Event) { 
evt.currentTarget. rotation+=l; 



Tracer un cercle ou une ellipse 

La technique pour tracer un cercle ou une ellipse, est aussi simple que celle pour creer un 
carre ou un rectangle. II vous suffit de faire appel aux methodes drawCi rcl e( ) et drawEl 1 i pse( ). 
Dans le cas de la premiere, vous devez definir des coordonnees x et y pour positionner le 
cercle, puis un troisieme parametre pour definir le rayon du cercle. Dans le cas d'une 
ellipse, vous devez definir deux rayons de tailles differentes. 

var boutonRond:Shape = new ShapeO; 

boutonRond.graphics.beginFil 1 (0x666666,0.7) ; 
boutonRond.graphics.drawCi relet 300, 200, 50) ; 

addChild(boutonRond) ; 
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Dans cet exemple, nous tracons un cercle gris fonce a 70 % d'opacite de 100 pixels de 
diametre, soit 50 pixels de rayon, dont le centre est a 300 pixels du bord gauche de la 
scene et 200 du haut. 

Ellipse 

A la difference du cercle, la methode drawEl 1 i pse( ) ne gere pas les coordonnees x et y de la 
meme facon. Elles correspondent en effet au coin superieur gauche du rectangle invisible 
dans lequel vient s'inscrire l'ellipse un fois tracee. 

Regler les attributs d'une forme 

Parmi les differents reglages d'une forme, on trouve l'epaisseur et le style du trait, mais 
egalement son remplissage. Commencons par decouvrir qu'un trait ne se limite pas a une 
representation d'un simple trace d'un pixel de largeur de couleur noire. 

Attributs de trait 

Fichier de reference : Chapitre6/trace9.fla 

Dans le premier exemple presente, voici la ligne d'instruction que nous avions utilisee : 

1 igneSeparati on. graphics.! ineStyle(4,0xFFFFFF,l) ; 

La methode lineStyleO contient trois parametres qui permettent de mettre en forme 
l'apparence d'un trait, mais il en existe d'autres qui sont utiles lorsque vous utilisez des 
epaisseurs plus importantes. 

Modifier l'apparence des extremites d'un trace 



I- 



trai t. graphics. lineStyle( 20, OxFFFFFF, 0.7, false, Li neScaleMode. NORMAL .CapsStyle. ROUND, 
JointStyle. MITER); 



II s'agit de l'avant-dernier parametre dans l'exemple ci-dessus ; il peut posseder trois 
valeurs : 

• CapsStyl e. NONE (pas d'extremite) 

• CapsStyle. SQUARE (extremite carre) 

• CapsStyl e . ROUND (extremite ronde) 

Nous nous permettons de vous le preciser de nouveau : ces attributs ne sont visibles qu'a 
partir du moment ou vous avez defini une epaisseur de trait importante. 

Par ailleurs, quelle difference fait-on precisement entre les constantes NONE et SQUARE. 
Voici une copie d'ecran qui demontre la continuite (CapsStyl e . SQUARE) du trace au-dela du 
point directeur de la deuxieme courbe de Bezier. En fonction de la position du point 
d'ancrage d'une extremite par rapport a une autre, le parametre CapsStyl e permet d'effectuer 
des raccords proprement sans qu'il n'y ait un debordement ou un blanc. 
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Figure 6-10 

Les trois types d'extremites disponibles 
pour un trait : CapsStyle.NONE, 
CapsStyle.SQUARE et CapsStyle.ROUND. 




Dans le fichier trace9.fla, le script ci-dessous permet de definir l'extremite des deux 
raquettes du fameux jeu Pong (qui n'est pas fonctionnel dans notre exemple). 

var raquettel: Shape = new ShapeO; 

raquettel.graphics.lineStyle(20,0xFFFFFF,0.7,false,LineScaleMode.N0RMAL,CapsStyle. 

GROUND, JointStyle. MITER); 

raquettel. graphics .moveTo(30,100) ; 

raquettel. graphics .1 ineTo(30,180) ; 

addChild(raquettel) ; 

var raquette2:Shape = new ShapeO; 

raquette2.graphics.lineStyle(20,0xFFFFFF,0.7,false,LineScaleMode.N0RMAL,CapsStyle. 

'•SQUARE, JointStyle. MITER); 

raquette2. graphics .moveTo(470,100) ; 

raquette2.graphics.lineTo(470,180) ; 

addChild(raquette2); 

Modifier I'apparence des angles d'un trace ouvert ou ferme 

Comme vous pouvez le constater sur la copie d'ecran de la figure 6-11, l'extremite des 
fleches differe car nous avons utilise trois valeurs differentes pour le dernier parametre de 
la ligne d' instruction ci-dessous : 

tra i t. graphi cs. 1 ineStylet 20, OxFFFFFF, 0.7, false, Li neScaleMode. NORMAL, CapsStyle.ROUND, 
^•JointStyle. MITER); 

Vous avez le choix entre ces trois constantes : 

• JointStyle. MITER 

• JointStyle. ROUND 

• JointStyle. BEVEL 



Figure 6-11 

Trois types d'extremites permettent 
de definir V apparence d'un trait. 
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Dans le fichier trace9 . f 1 a, vous decouvrirez trois traces relativement epais qui possedent 
des angles comparables aux extremites des fleches de la figure 6-1 1. Voici les scripts que 
nous avons utilises. 

var trajectoi relrShape = new ShapeO; 

trajectoirel. graphics .lineStyle(30,0xFFFFFF,0.7,false,LineScaleMode.N0RMAL,CapsStyle. 

*»SQUARE.JointStyle. ROUND); 

trajectoirel.graphics.moveTo(100,50) ; 

trajectoirel. graphics .1 ineTo(150,90) ; 

trajectoirel. graphics .1 ineTo(200,50) ; 

trajectoirel. graphics .1 ineTo(250,90) ; 

trajectoirel. graphics .1 ineTo(300,50) ; 

addChildt trajectoi rel) ; 

var trajectoi re2:Shape = new ShapeO; 

trajectoi re2. graphics .lineStyle(30,0xFFFFFF,0.7,false,LineScaleMode.N0RMAL,CapsStyle. 

^■SQUARE. JointStyle. MITER) ; 

trajectoire2.graphics.moveTo(100,125) ; 



trajectoi re2. graphics .' 
trajectoi re2 .graphi cs . " 
trajectoi re2. graphics .' 
trajectoi re2 .graphi cs . " 
addChildttrajectoi re2) 



ineTo(150,165) 
ineTo(200,125) 
ineTo(250,165) 
ineTo(300,125) 



var trajectoi re3:Shape = new ShapeO; 

trajectoi re3. graphi cs.l ineStylet 30, OxFFFFFF, 0.7, false, Li neScaleMode. NORMAL, CapsStyle. 

^■SQUARE. JointStyle. BEVEL) ; 

trajectoire3.graphics.moveTo(100,200) ; 



trajectoi re3. graphics .' 
trajectoi re3 .graphi cs . " 
trajectoi re3. graphics.' 
trajectoi re3 .graphi cs . " 
addChildttrajectoi re3) 



ineTo(150,240) 
ineTo(200,200) 
ineTo(250.240) 
ineTo(300,200) 



Une imperfection enfin corrigee 

Pendant de nombreuses annees, certaines courbes presentaient des imperfections de lissage ! 
II nous est a present possible de corriger ce defaut en reglant le quatrieme parametre 
a true. 

I carte. graphi cs.l ineStylet 3, OxFFFFFF, 0.7, true, Li neScaleMode. NORMAL, CapsStyle. SQUARE, 
^JointStyle. BEVEL); 

Figure 6-12 

Dans certains cas, le lissage d'un contour 
peut presenter des imperfections. 
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Remplissage 

Fichier de reference : Chapitre6/trace3.fla 

II existe une methode tres simple pour remplir une forme fermee qui s'intitule begi nFi IK). 
Vous devez indiquer deux parametres : la valeur hexadecimale correspondant a la couleur et 
le niveau de transparence (valeur comprise entre et 1, comme 0,65 pour 65 %). 

Notons que cela fonctionne egalement pour des formes ouvertes, mais le remplissage se 
limite alors dans ce cas aux extremites (le programme imagine une droite transparente 
entre ces dernieres pour fermer la forme). 

En partant de la creation de formes (rectangle et cercle), voici comment vous pouvez remplir 
une forme : 

var tapisJeu:Shape = new ShapeO; 

tapisJeu. graphics.! ineStyle(4,0xFFFFFF,l) ; 
tapisJeu. graphics. begi nFi 11 (0x33aa33,l) ; 
tapisJeu.graphics.drawRect(20,20,250,230); 

addChild(tapisJeu) ; 

var carteAJouer:Shape = new ShapeO; 

carteAJouer.graphics.lineStyle(4,0xFFFFFF,l) ; 
carteAJouer. graphics. begi nFi 11 (0xaa3333,0.7) ; 
carteAJouer. graphics.drawRoundRectt 250, 40, 120. 180, 20); 

addChild(carteAJouer) ; 

var boutonRond:Shape = new ShapeO; 

boutonRond. graphics. begi nFi 1 1 (0x3333aa ,0.7) ; 
bouton Rond. gra phi cs.drawCi relet 400, 130, 15) ; 

addChild(boutonRond) ; 




Figure 6-13 

Une forme peut posseder un fond plus ou moins opaque, avec ou sans contour. 
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Vous noterez qu'une forme contenant une couleur n'est plus obligee de posseder de 
contour ; c'est le cas du cercle a droite de la figure 6-13. 



Script dans un fichier AS 

Fichiers de reference : Chapitre6/trace5.fla et TracerMain.as 

Une fois encore, le cceur du code que nous utilisons dans le fichier AS externe est le 
meme que celui que nous avons saisi dans la fenetre Actions. Nous vous le presentons 
tout de meme pour vous proposer un exemple et mettre en evidence la necessite d'impor- 
ter la classe GraphicsO qui possede toutes les methodes que nous n'avons pas cesse 
d'utiliser (drawCircleO, lineToO, moveToO, etc.). 

package { 

import flash. display. Sprite; 
import flash. display. Graphics; 



public class TracerMain extends Sprite { 

public var carteAJouer:Sprite; 

function TracerMainO { 

carteAJouer = new SpriteO; 

carteAJouer.graphics.l ineStyle(4,0xFFFFFF,l) ; 
carteAJouer.graphics.beginFil 1 ( OxFFFFFF.O . 2) ; 
carteAJouer. graphics. drawRoundRectt 250 ,40, 120, 180, 20); 

addChild(carteAJouer) ; 



Tracer des formes en fonction des evenements souris 

Fichier de reference : Chapitre6/trace6.fla 

Jusqu'a present, toutes les formes que nous avons creees ont ete tracees sur la scene sans 
que nous ayons besoin d'intervenir a l'aide du clavier ou de la souris. Nous souhaiterions 
a present pouvoir tracer un cercle ou un rectangle au moment de l'execution du fichier 
SWF et non au moment de la realisation de 1' animation. 

Prenons l'exemple d'un cercle ou d'un rectangle que vous auriez besoin de tracer a l'aide 
de la souris. Vous devez non seulement prevoir l'utilisation d'un gestionnaire, mais aussi 
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definir l'instant de son declenchement. Regardons tout de suite cet exemple qui est parti- 
culierement interessant pour de nombreuses raisons. 

var cadre:Shape = new ShapeO; 
addChild(cadre); 

var pointDepartX: Number ; 
var pointDepartY:Number ; 

var ecartl_argeur:Number; 
var ecartHauteur:Number ; 

stage. addEvent Li stener(MouseEvent.MOUSE_DOWN,creer Rectangle) ; 
stage.addEvent Li stener(MouseEvent.MOUSE_UP, annul erMouseMove) ; 

function annulerMouseMove(evt:MouseEvent) { 
stage. removeEventListener(MouseEvent.MOUSE_MOVE,tracerRectangle) ; 



function creerRectangle(evt:MouseEvent) { 

pointDepartX = mouseX; 
pointDepartY = mouseY; 

s tage. add Event Li stener(MouseEvent.MOUSE_MOVE, tracer Rectangle) ; 



function tracerRectangle(evt:MouseEvent) { 

ecart La rgeur=mouseX- pointDepartX; 
ecartHauteur=mouseY- pointDepartY; 

cadre.graphics.clearO; 
cadre.graphics.lineStyle(2,0x222222,0.6); 

cadre. graph ics.drawRect( pointDepartX, pointDepartY, ecart La rgeur.ecartHauteur) ; 
} 

Nous commencons par creer une instance de la classe ShapeO pour pouvoir definir un 
style de trait et lui appliquer la methode drawRect( ) ulterieurement dans le script. 

Les quatre variables que nous declarons vont nous servir, comme leurs noms l'indiquent, 
a memoriser l'emplacement du clic au moment ou l'utilisateur s'apprete a tracer la forme 
et stacker le calcul de la largeur et de la hauteur du quadrilatere. 

Attention : vous ne devez pas demander au lecteur Flash de chercher a tracer la forme 
(rectangle ou carre) des que la souris bouge. Cela ne doit etre effectue qu'a partir du 
moment ou un clic a ete defini sur la scene. C'est la raison pour laquelle l'objet d'ecoute 
qui fait appel a l'evenement M0USE_M0VE se trouve dans la fonction de rappel de l'objet 
d'ecoute qui fait lui-meme appel a l'evenement M0USE_D0WN. Ann de terminer le trace du 
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quadrilatere, l'ecouteur gerant l'evenement M0USE_M0VE doit etre detruit au moment oil 
l'utilisateur relache le bouton de la souris. 

La realisation d'un rectangle qui change de taille en continu lorsque le curseur de la 
souris bouge est possible grace a la methode cl ear( ), qui efface le dernier trace (realise a 
l'aide de la methode drawRectO) avant qu'un nouveau soit redefini (les deux dernieres 
lignes du script). 

Pour obtenir une creation de forme en partant du centre (depuis l'emplacement du clic de 
la souris), adaptez la fonction tracerRectangl e( ) comme ceci : 

function tracerRectangle(evt:MouseEvent) { 



decalCentreX 
decalCentreY 



ecartl_argeur=mouseX-pointDepartX; 
ecartHauteur=mouseY-pointDepartY; 

if ( evt.shiftKey) { 

decalCentreX = Math.abs(ecartLargeur/2) ; 
decalCentreY = Math.abs(ecartHauteur/2) ; 
} 
cadre. graphi cs. cl ear( ) ; 
cadre. graphics.l ineStyle( 2, 0x222222, 0.6); 

cad re. gra phi cs.drawRect(pointDepartX-decal Cent reX.pointDepartY-decal Cent reY, 
*ecartl_argeur,ecartHauteur) ; 



Sprite, Shape ou MovieClip ? 

La principale difference entre ces trois classes reside dans 1' importance de leurs proprietes 
et de leurs methodes. Prenons un exemple precis : vous souhaiteriez creer un rectangle 
aux coins arrondis, comme une carte a jouer ; vous devez, dans ce cas, creer une instance 
de la classe SpriteO ou MovieClipO, car la classe ShapeO ne possede pas la methode 

startDrag( ). 

D'une facon generale, nous pouvons dire qu'il est conseille d'utiliser la classe ShapeO 
pour tracer des formes vectorielles dans le but d'habiller la scene. En revanche, si vous 
souhaitez creer un element graphique pour pouvoir le controler, nous vous conseillons 
d'utiliser les classes SpriteO ou MovieClipO. 



Rappel 

Une occurrence de Sprite ne possede pas de timeline contrairement a celle d'un MovieClip. 
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Utiliser un tableau 

Fichier de reference : Chapitre6/trace7.fla 

Pour realiser des formes bien plus complexes que celles que nous avons pu decouvrir dans 
ces explications, vous pouvez stacker les coordonnees de points a joindre pour former un 
trace. Dans la pratique, le mieux serait de stacker des donnees dans un fichier XML. Dans 
notre exemple, nous avons utilise un tableau, ce qui a le merite d'etre plus facile a creer. 



Remarque 

Ouvrez le fichier trace7.fla pour decouvrir I'ensemble des donnees reellement contenues dans le 
tableau coord. 



var coord=[248.25,38.1 248.25,38.55]; 

var contourFrance:Shape = new ShapeO; 
addChild( con tour France) ; 

contour France, graphics.! ineStyled ,0x474763,1) ; 
contour France. graphics.moveTo( coord [0] ,coord[l]) ; 

for (var i :Number=2; i<coord.length-l; i+=2) { 

con tou r France. graph ics.lineTo( coo rd[i ] , coord [i+1]) ; 
} 

contourFrance.y = -20; 

contourFrance.scaleX = contourFrance.scaleY = 0.75; 

Le resultat de ce script aboutit au trace de la carte de France. 




Figure 6-14 

Cette forme est obtenue d partir d'une multitude de points stockes dans un tableau et d'une serie de UneToQ, 
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Realiser un trace progressivement 

Fichier de reference : Chapitre6/trace8.fla 

Nous sommes partis du script du fichier trace7.fla que nous avons adapte. Pour la 
temporisation du trace des nombreuses droites qui composent le contour de la France, 
nous avions principalement deux solutions : aj outer une fonction de rappel appelee par 
un ecouteur gerant l'evenement ENTERJRAME ou bien creer une instance de la classe Timert ). 
C'est cette derniere solution que nous avons retenue. 

var contourFrance:Shape = new ShapeO; 
addChi Id (contour France) ; 

contour France. graphics.l ineStyle( 1,0x474763,1) ; 
contour France. graphics. moveTot coord [0] ,coord[l]) ; 

contourFrance.y = -20; 

contourFrance.scaleX = contourFrance.scaleY = 0.75; 

var compteur: Tinier = new TimerdO, coord. length/2) ; 
compteur.addEvent Listener (Timer Event. TIMER, tracer France) ; 
var entree:Number = 2; 

function tracerFrance (evt:Event) { 
contour France. graphics.l ineToC coord [entree] , coord [en tree+1]) ; 
entree+=2; 
if (entree==coord. length) compteur. stop( ) ; 

} 

compteur. start( ) ; 



Conclusion 



Ne negligez surtout pas le travail des formes vectorielles pour realiser certaines parties de 
vos interfaces. Vous gagnerez non seulement en poids de fichier (aspect plus ou moins 
negligeable selon la nature de vos animations), mais surtout en temps de developpement 
et en souplesse de deploiement de certaines fonctionnalites. 



Importation d'images 

Nous n'allons pas aborder tout de suite la technique d'importation d'une image sur la 
scene a partir de lignes d' instructions en AS. Mais, comme ce chapitre explique claire- 
ment les avantages et les inconvenients des differentes methodes de construction d'une 
interface, nous nous devions, tout de meme, de consacrer un petit paragraphe aux avanta- 
ges d'une importation dynamique de photos sur la scene. 
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Jusqu'a present, vous utilisiez peut-etre la commande Importer du menu Fichier pour 
placer des images sur la scene. En dehors du fait que cela augmente tres rapidement le 
poids de vos fichiers SWF, vous avez peut-etre pu remarquer, ou vous remarquerez, qu'il 
n'est pas tres facile de mettre a jour des animations gerant les photos de cette facon. 

Pour pallier ces deux inconvenients, il vous suffit de charger des images sur la scene a 
partir de lignes d' instructions. Cela presente l'avantage de pouvoir substituer une image 
a une autre pour mettre a jour une animation qui charge une photo a partir des classes 
LoaderO et URLRequest( ). 

N'avez-vous jamais eu besoin de placer des photos sur la scene sous forme de quadrillage ? 
Un petit tableau de 36 photos (six lignes de six colonnes) ! En ActionScript, il vous suffit 
de quelques lignes de code, alors qu'a partir de 1' interface de Flash, il vous faudra quelques 
tres longues minutes ! 

Consultez le chapitre 12 pour decouvrir le code necessaire au chargement d'une image. 

Instanciation de classes personnalisees 

Comme vous avez pu le lire rapidement au debut de ce chapitre, il est possible de creer le 
contenu d'une animation en faisant appel a des fichiers externes. Les lignes d' instructions 
ci-dessous le prouvent et permettent d'obtenir un texte sur la scene sans avoir besoin de 
le creer a partir de l'outil dedie disponible dans l'interface de Flash. 

Ivar zoneTexte=new TextFieldO; 
zoneTexte.text="Bonjour" ; 
addChild(zoneTexte) ; 

Comment pourrions-nous eviter de copier-coller ces trois lignes si nous souhaitions creer 
de nombreux textes, comme pour generer des titres, des paragraphes, etc. ? 

La solution est tout aussi simple a comprendre qu'a mettre en oeuvre : vous devez creer 
une classe ! Dans le chapitre 16, nous proposons une premiere approche du travail avec 
les classes a travers deux exemples precis ; le premier presente une classe qui permet 
d'effectuer une conversion de nombre, alors que le deuxieme rattache une classe a un 
symbole. Ni l'un ni l'autre ne genere de contenu sur la scene. Dans les lignes qui vont 
suivre, nous allons apprendre a creer une classe que nous allons ensuite instancier dans le 
but d'obtenir une occurrence sur la scene. 

Rappelons que la programmation d'une animation qui fait appel a des classes presente de 
nombreux avantages, dont le principal est de pouvoir reutiliser le code contenu dans un 
fichier AS. Au chapitre 1, dans la partie La programmation orientee objet, nous avions 
decouvert le principe et la methode pour developper proprement. Allons a present plus 
loin et realisons ensemble une classe chargee de placer un texte sur la scene. 

Fichiers de reference: Chapitre6/creationTexte.fla, Chapitre6/CreationTexteMain.as et 
Chapitre6/CreationTexte.as 

Pour commencer, examinez en detail la construction de cette interface. 
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Figure 6-15 

Textes obtenus a partir d'une seule classe. 



Les textes, tous differents les uns des autres, ont ete places sur la scene a partir d'une 
seule ligne d' instruction. 

titre = new CreationTextet" Liste des films d'animations" ,1); 

Dans cet exemple, nous avons deux parametres ; nous eviterons pour le moment de 
commenter le deuxieme, car il sera traite lors de 1' analyse du dernier exemple. Si vous 
observez bien les copies d'ecran de la figure 6-15, vous noterez que certains textes n'ont 
surement pas ete saisis en parametre de la classe CreationTextet ). C'est effectivement le cas 
pour les titres des films, les noms des etudiants, les pitchs et les noms des series de photos. 
Ces informations ont ete extraites d'un fichier XML et non renseignees directement. 

Ivar nomFi 1 m : St ring=donneesXML. Animation. Film[numeroFilm] .@nom.toString( ) ; 
titrel_egende\/ignette=new CreationTexte(nomFilm,300,3) ; 



Ne tenons pas compte de cela et commencons tout de suite. 
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La structure des fichiers 

Nous avons commence par creer un fichier Flash (.fla), puis nous l'avons enregistre 
(creati onTexte . f 1 a). Nous avons ensuite cree la classe du document : il s'agit d'un fichier AS 
enregistre sous le nom CreationTexteMain.as (nous n'avons pas pu le nommer main. as car 
un autre fichier portant le me me nom se trouvait deja dans le dossier intitule Chapitre6). 
Nous avons termine notre premiere manipulation en saisissant le mot Creati onTexteMain 
dans la zone de saisie (Classe du document) situee en has a droite de la palette Propriete 
du fichier creationTexte.fi a. 

A partir de la, nous pouvons dire que nous avons une construction basique et standard 
d'un projet Flash. 



Figure 6-16 

Un fichier Flash et 
sa classe du document 
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CreationTexteMain.as 



Nous terminons cette premiere phase en creant un deuxieme fichier AS qui va justement 
contenir notre classe Creati onTexteO et nous le nommons Creati onTexte. as. II ne nous 
reste plus qu'a saisir les lignes d' instructions contenues dans ces fichiers. 



Contenu des fichiers AS 

Le fichier Creati onTexteMai n .as contient le script ci-dessous 

package ( 

import fl ash. display. Sprite; 

public class CreationTexteMain extends Sprite { 

public static var titrel:CreationTexte; 
public static var titre2:CreationTexte; 

function CreationTexteMain( ) { 
titrel = new CreationTexteC'Paris"); 
titre2 = new CreationTexte( "Londres" ) ; 

addChild(titrel); 

titrel. y = 50; 

addChild(titre2); 
titre2.y = 100; 

titrel. x = titre2.x = 25; 
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Comme vous pouvez le constater, le script est extremement simple : il se limite a la crea- 
tion de deux instances de la classe CreationTexteO. Pour les neophytes en matiere de 
programmation orientee objet, nous vous rappelons qu'il est vivement conseille de lire la 
fin du chapitre 1 de ce livre pour mieux apprehender la structure d'un fichier AS. Reve- 
nons tout de meme sur cette petite analyse. 

Nous importons la classe SpriteO car la classe CreationTexteMain( ) est etendue a partir 
de celle-ci. 



Rappel 

Etendre une classe permet d'en creer une nouvelle (Creati onTexteMai nO) sans etre oblige de redefi- 
nir toutes ses proprietes et methodes, car elle herite deja de celle que vous etendez (Spritet )). Ainsi, 
dans notre exemple, la classe Creati onTexteMai n ( ) dispose deja de toutes les proprietes et methodes 
de la classe SpriteO. 



Nous vous rappelons ensuite que le nom de la classe doit etre precede du terme publ i c, car 
cela nous permet justement de faire reference a ce mot (cette classe et son contenu) a partir 
d'autres fichiers AS. Avant de creer le constructeur (function CreationtexteMainOO), 
nous declarons deux nouvelles instances de la classe CreationTexteO, c'est-a-dire que 
nous informons le programme de l'existence prochaine de deux instanciations de la 
classe CreationTexteO. 

Maintenant, dans le constructeur, qui doit porter le meme nom que celui de la classe, 
nous instancions tout simplement la classe CreationTexteO, puis nous ajoutons ces deux 
instances a la liste d'affichage. 

Ce premier fichier AS est tres simple pour un developpeur dont les connaissances en 
POO sont acquises, car nous instancions tout simplement la classe CreationTexteO dont 
voici le contenu (fichier Creati onTexteMai n. as). 

package { 

import flash. display. Sprite; 
import flash. text.*; 

public class CreationTexte extends Sprite ( 

public var zoneTexte:TextField; 

public function CreationTexte(expression:String) { 

zoneTexte=new TextFieldO; 
zoneTexte.text=expression; 
addChild(zoneTexte) ; 
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Vous noterez que le script est court car il fait tres peu de choses : il se contente de creer 
un texte dynamique. Observez bien le coeur de la classe. II s'agit des memes lignes 
d' instructions que celles que nous avions utilisees en introduction a ce developpement, 
Instanciation de classes personnalisees. 

Dans cette classe, nous importons (import flash. text.*) toutes les sous-classes du 
package text, car nous allons ajouter des fonctionnalites dans l'exemple qui va suivre. 

Dans le constructeur, nous commencons done par declarer une instance intitulee zoneTexte 
de type TextField, que nous initialisons. 

Nous ne devons pas oublier de faire appel a la methode addChildO qui va afficher 
l'instance zoneTexte dans les conteneurs d'objet d'affichage titrel et titre2. 

Voila ! En executant le fichier creationTexte.fi a, vous decouvrirez que le fichier AS 
CreationTexteMain.as fait appel a celui qui s'intitule CreationTexte.as. Vous constaterez 
tout de meme que le texte n'est pour l'instant pas mis en forme, ce a quoi nous allons 
tenter de remedier. 

Deuxieme exemple 

Fichiers de reference: Chapitre6/creationTitre.fla, Chapitre6/CreationTitreMain.as et 
Chapitre6/CreationTitre.as 

Dans ce deuxieme exemple, nous avons tout simplement reproduit le code que nous 
avions ecrit dans le premier exemple pour generer deux fichiers AS et un .fla. Nous avons 
egalement adapte le nom de nos classes puis change le contenu des fichiers AS. 



Remarque 

Si, pour gagner du temps, vous dupliquez les fichiers du premier exemple, n'oubliez pas de changer le 
nom de la classe du document dans le fichier creati onTi tre .fla. 



Voici les lignes d'instructions contenues dans le fichier CreationTitreMain.as 

package ( 

import fl ash. display. Sprite; 

public class CreationTitreMain extends Sprite { 

public static var titrel:CreationTitre; 
public static var titre2:CreationTitre; 

function CreationTitreMain( ) { 
titrel = new CreationTitreC'La ville Lumiere"); 
titre2 = new CreationTitreC'se trouve aux pays des peintres ..."); 

addChild(titrel); 
titrel. y = 50; 
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addChild(titre2); 
titre2.y = 100; 

titrel.x = titre2.x = 25; 



} 

Vous noterez qu'il n'y a aucun changement majeur : nous avons simplement modifie le 
nom des classes. En revanche, nous avons ajoute de nombreuses lignes dans le fichier 

CreationTitre.as : 

package { 



import flash. display. Sprite; 
import flash. text.*; 

public class CreationTitre extends Sprite 

public var zoneTexte:TextField; 
private var styleEnTitre:TextFormat; 



public function CreationTitre(expression:String) { 

zoneTexte=new TextFieldO; 
zoneTexte.name="zoneTexte" ; 

zoneTexte.selectable=fal se; 
zoneTexte.text=expression; 
zoneTexte.autoSize=TextFieldAutoSize. LEFT; 
zoneTexte. embed Fonts=t rue; 

styleEnTitre=new TextFormatt ) ; 

s ty 1 eEnTit re. col or=" 0x474763" ; 

styleEnTitre.size=24; 

s ty 1 eEnTit re. align=TextFormatAlign. RIGHT; 

styleEnTitre.font="Hel vetica Neue Bold Condensed"; 

zoneTexte.setText Format (styl eEnTit re) ; 

addChild(zoneTexte) ; 

) 

} 
} 

Le debut de la classe est inchange, a l'exception de l'import des sous-classes du package 

text. 
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Note 

Si vous ne connaissez pas encore les proprietes et autres methodes liees a la 
consultez le chapitre 1 4 ; toutes ces notions y sont expliquees. 


mise en 


forme du texte, 



Nous avons ensuite instancie la classe TextFormat( ) pour definir les valeurs de toutes les 
proprietes utilisees dans notre style (color, size, align et font). 

Comme vous pouvez le remarquer, la mefhode setTextFormat( ) sert a appliquer la mise en 
forme a l'instance de type TextFi el d( ) , mais une fois encore, cela ne suffit peut-etre pas. 

Si vous ne devez creer qu'un seul type de texte dans une animation, cette classe peut vous 
suffire. En revanche, dans le cas ou vous souhaiteriez gerer plusieurs styles differents, il 
faudrait la developper davantage. 

II serait tres simple d'ajouter des parametres dans le constructeur de notre classe, mais 
nous risquerions d'aboutir a des mises en forme de textes irregulieres. 

Revenons sur ce dernier propos et tentons de l'expliquer. Lorsque vous effectuez une 
mise en pages, vous devez respecter une charte graphique qui se definit par l'usage d'un 
code couleur, l'utilisation d'une certaine iconographie et le choix d'une typographic 
accompagnee de differents styles. Comme vous pouvez le constater sur la copie d'ecran 
de la figure 6-15, les textes utilisent tous la meme police de caracteres, mais pas la meme 
graisse ni le meme corps. Chaque style correspond a une definition particuliere. Voici 
d'ailleurs les lignes destructions qui ont permis d'aboutir a ce resultat (elles sont sorties 
de leur contexte, mais l'objectif de cette presentation est de vous faire prendre conscience 
de la necessite de creer des styles et non une mise en forme ponctuelle a 1' occasion d'un 
nouveau besoin). 

public function styleTitreO { 

styleEnTitre=new TextFormat( ) ; 

styleEnTitre.color="OxFFFFFF" ; 

styleEnTitre. si ze=24; 

styleEnTitre.al ign = TextFormatAl ign. RIGHT; 

styleEnTitre.font="Hel vetica Neue Bold Condensed"; 

zoneTexte.setText Format (styleEnTitre) ; 

} 

public function styleListeO { 

styleEnTitre=new TextFormat( ) ; 

styleEnTitre. col or="OxCCCCCC" ; 

styleEnTitre.size=19; 

styleEnTitre.al ign = TextFormatAl ign. RIGHT; 

styleEnTitre. font="Hel vetica Neue Bold Condensed"; 

zoneTexte.setText Format (styleEnTitre) ; 

zoneTexte. add Event Listener (Mouse Event. C LI CK.l igneCliquee) ; 
} 
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public function styleTitreLegendet ) { 

styleEnTitre=new TextFormatt ) ; 

styleEnTitre.color="OxFFFFFF" ; 

s tyl eEnTi t re. size=24; 

styleEnTitre. align = TextFormatAl ign.LEFT; 

styleEnTitre. font="Hel vetica Neue Bold Condensed" 

zoneTexte.setText Format (styleEnTitre) ; 
} 
public function styleCategoriel_egende( ) { 

styleEnTitre=new TextFormatt); 

styleEnTitre. col or="OxCCCCCC"; 

s tyl eEnTi t re. size=16; 

styleEnTitre. align = TextFormatAl ign.LEFT; 

styleEnTitre. font="Hel vetica Neue Bold Condensed" 

zoneTexte.setText Format (styleEnTitre) ; 
} 
public function styleEtudiantsLegende( ) { 

styleEnTitre=new TextFormatt); 

styleEnTitre. col or="OxCCCCCC"; 

s tyl eEnTi t re. size=12; 

styleEnTitre. align = TextFormatAl ign.LEFT; 

s ty 1 eEnTi t re. font=" Helvetica Neue" ; 

zoneTexte.setText Format (styleEnTitre) ; 



public function stylePitchFilm( ) { 

styleEnTitre=new TextFormatt); 

styl eEnTi t re. col or="OxFFFFFF" ; 

s tyl eEnTi t re. size=13; 

styleEnTitre. align = TextFormatAl ign.LEFT; 

s ty 1 eEnTi t re. font=" Helvetica Neue" ; 

zoneTexte. wordwrap = true; 

zoneTexte.setText Format (styleEnTitre) ; 



public function styleVoirLeFilmt ) { 

styleEnTitre=new TextFormatt); 

styl eEnTi t re. col or="OxFFFFFF" ; 

s tyl eEnTi t re. size=16; 

styleEnTitre. al ign = TextFormatAl ign. CENTER; 

styleEnTitre. font="Hel vetica Neue Bold Condensed" 

zoneTexte.setText Format (styleEnTitre) ; 



public function styleListePhotot ) 

styleEnTitre=new TextFormatt); 
styl eEnTi t re. col or="OxFFFFFF" ; 
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styleEnTitre.size=19; 

styleEnTitre.al ign = TextFormatAl ign. LEFT; 

styleEnTitre.font="Hel vetica Neue Bold Condensed"; 

zoneTexte. multiline = true; 

zoneTexte. wordwrap = true; 

zoneTexte. setText Format (styleEnTitre) ; 

zoneTexte. addEvent Li stener(MouseEvent.C LI CK.ligneCl iquee) ; 
} 

Lorsqu'une personne doit faire appel a une classe qu'elle n'a pas concue, elle ne peut alors 
choisir qu'entre les differents styles predefinis dans la charte graphique. Cela permet de 
garder une certaine coherence dans la mise en forme d'un ecran. 

Nous allons done devoir modifier une troisieme et derniere fois notre classe CreationTexte( ) 
ou CreationTitret ) afin de la completer. 



Troisieme exemple 



Fichiers de reference : Chapitre6/texteEnForme.fla, Chapitre6/TexteEnFormeMain.as et 
Chapitre6/TexteEn Forme. as 

Pour cette derniere serie de trois fichiers, nous sommes de nouveau partis des fichiers 
precedents que nous avons modifies comme auparavant (changement du nom des fichiers 
et des classes, sans oublier le nom de la classe de document dans la palette Proprietes du 
fichier texteEnForme.fi a). 

Voici done le contenu des deux fichiers AS. 

package { 

import fl ash. display. Sprite; 

public class TexteEnFormeMain extends Sprite { 

public static var titrel:TexteEnForme; 
public static var titre2:TexteEnForme; 

function TexteEnFormeMain( ) { 
titrel = new TexteEnFormeC'Le soleir de la mer",l); 
titre2 = new TexteEnFormeC'par Paul GreenBegmann" ,2) ; 

addChild(titrel); 
titrel. y = 50; 

addChild(titre2); 
titre2.y = 80; 

titrel. x = titre2.x = 25; 



ActionScript 3 - Programmation sequentielle et orientee objet 



et 

package 



import flash. display. Sprite; 
import flash. events. MouseEvent; 
import flash. text.*; 

public class TexteEnForme extends Sprite 

public var zoneTexte:TextField; 
private var styleEnTitre:TextFormat; 



publ ic function TexteEnForme(expressi on :String,numeroStyle: Number) 

zoneTexte=new TextFieldO; 

zoneTexte.name = "zoneTexte" ; 

zoneTexte. selectable = false; 

zoneTexte. text=express ion; 

zoneTexte. autoSize= TextFieldAutoSize. LEFT; 

zoneTexte. embed Fonts=t rue; 

addChild(zoneTexte) ; 

switch (numeroStyle) { 

case 1 : 
styleTitre( ) ; 
break; 

case 2 : 
styleAuteurt ) ; 
break; 



public function styleTitreO { 

styleEnTitre=new TextFormatt); 

styleEnTitre.color="OxFFFFFF" ; 

styleEnTitre.size=24; 

styleEnTitre. align = TextFormatAl ign. RIGHT; 

styleEnTitre. font="Hel vetica Neue Bold Condensed" 

zoneTexte. setText Format (styleEnTitre) ; 



public function styleAuteur( ) { 

styleEnTitre=new TextFormatt); 
styleEnTitre. col or="OxDDDDDD"; 
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styleEnTitre.size=14; 

styleEnTitre.al ign = TextFormatAl ign. RIGHT; 
styleEnTitre.font="Hel vetica Neue Bold Condensed"; 
zoneTexte.setText Forma t( sty leEnTitre) ; 



} 
} 

En comparant avec la classe precedente, vous constaterez que nous n'avons modifie qu'une 
seule ligne du fichier TexteEnFormeMain.as. 

Ititrel = new TexteEnForme( "Le soleir de la mer",l); 
titre2 = new TexteEnForme( "par Paul GreenBegmann" ,2) ; 

Nous avons simplement ajoute un parametre lors de l'instanciation de la classe et, de ce 
fait, cela sous-entend que nous avons modifie la classe TexteEnFormeO. Le changement 
est flagrant et se caracterise par les lignes suivantes : 

switch (numeroStyle) { 

case 1 : 
styleTitret ) ; 
break; 

case 2 : 

styleAuteur( ) ; 

break; 
} 

En fonction de la valeur du parametre precise lors de l'instanciation de la classe Texte- 
EnFormeO, les fonctions styleTitreO ou styleAuteur( ) sont appelees. Ces dernieres sont 
similaires aux lignes destructions exposees precedemment : 

public function styleTitreO { 
styleEnTitre=new TextFormat( ) ; 
sty leEnTitre. col or="OxFFFFFF" ; 
styleEnTitre.size=24; 

styleEnTitre.al ign = TextFormatAl ign. RIGHT; 
styleEnTitre.font="Hel vetica Neue Bold Condensed"; 
zoneTexte.setText Format (sty leEnTitre) ; 
} 

Grace a cette technique, vous pouvez definir des styles bien precis pour une charte graphique 
et faciliter ainsi sa mise en ceuvre. 



Conclusion 



II peut paraitre fastidieux de devoir generer des nombreuses lignes de code pour aboutir 
a une action assez simple, mais c'est en pratiquant les classes externes que vous realiserez a 
quel point cette technique de developpement d'interface s'avere efficace. 
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Sans l'utilisation des classes, la realisation de certains projets deviendrait tres rapidement 
ininteressante a cause de taches repetitives. Si vous n'etes pas habitue a travailler avec 
des classes externes, effectuez de nombreuses tentatives pour vous entrainer : un tel 
investissement de temps sera tres rapidement benefique. 



7 



Les variables 



Par definition, une variable est un contenant dont le contenu est susceptible de varier. Les 
variables sont presentes dans la plupart des animations. Dans la vie courante, nous mani- 
pulons continuellement des notions ou des objets comparables a des variables. Nous 
substituons bien souvent un ou plusieurs mots a un ou plusieurs autres pour nous repre- 
senter precisement quelque chose ou quelqu'un. 

Qui n'a jamais vu les quatre lignes ci-dessous inscrites sur un tableau d'ecole ? 

a=2 

b=3 

c=a+b 

Combien vaut c ? 

Sans le savoir, vous avez deja manipule des variables ! Le calcul de c vous semble 
evident car vous substituez aux lettres a et b les valeurs 2 et 3. Les trois lettres a, b et c 
sont ici comparables a trois variables. 



Definition metaphorique 



Imaginons le sac de billes d'un petit garcon qui joue dans la cour de son ecole. II s'agit 
d'un petit morceau de toile que lui a cousu sa maman, sur lequel elle a egalement brode 
son prenom. 

Nous pourrions dire de ce sac qu'il s'agit d'une variable, qui va representer le nombre de 
billes que possede Leo. Le terme variable traduit simplement le fait que le contenu du sac est 
variable, justement, en fonction du resultat des parties de billes auxquelles Leo participe. 
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Figure 7-1 

Le nom brode sur le sac de billes d'un petit 
garcon est comparable au nom d'une variable. 




Le sac peut contenir 20, 28, 35 ou 57 billes, peu importe le nombre, mais lorsque le petit 
garcon y fera reference lors d'une conversation, il evoquera le nombre de billes. En disant 
« Je te donne mon sac de billes contre tous tes autocollants », il substitute la representation 
de ses billes par un terme metaphorique, « mon sac ». 

Le petit garcon ne mettra-t-il que des billes dans son sac ? II pourrait en effet y placer 
n'importe quel autre jouet, mais s'il ne veut pas se tromper sur revaluation du nombre de 
billes qu'il possede, il a tout interet a reserver ce sac au rangement de ses billes. 

Cette metaphore du sac de billes, contenant exclusivement des billes, est comparable a la 
notion de variable : le sac, et de type de variable : des billes mais pas d'objets d'un autre 
type. Abordons a present la notion de variable en programmation et notamment en 
ActionScript. 

Declaration d'une variable 

Avant de pouvoir faire reference a une variable dans un script, il est indispensable que vous 
informiez l'ordinateur de 1' existence de celle-ci. Pour cela vous devez, en tout debut de 
script (aussi bien en mode de programmation sequentielle qu'en mode oriente objet), indi- 
quer le nom que vous avez choisi pour representer la variable. Cette instruction s'appelle 
une declaration de variable. Le nom de la variable doit etre precede du mot-cle var. 

Ivar prenom; 
var monsac; 
var leo; 



Remarque 

Ces trois exemples de declaration de variables mettent en evidence le choix personnel et libre d'un nom 
de variable ; nous reviendrons sur cette notion un peu plus loin dans ce chapitre. 



Pour l'instant, vous avez declare une variable nominee prenom, mais il est possible de lui 
associer n'importe quel type de valeur, ce qui n'est pas une bonne facon de proceder. 
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Theoriquement et dans la pratique, il est preferable d'associer a une variable ce qu'on 
appelle un type, c'est-a-dire une information qui precise la nature de son contenu. 

var prenom: String; 

Comme vous pouvez le constater, nous avons ajoute deux points derriere le nom de la 
variable puis un nom, ici String. II s'agit precisement du nom du type, qui impose alors 
un contenu strict a la variable, que ce soit lors d'une initialisation (action de donner une 
valeur initiale a une variable) ou lors de toute modification de la variable (changement du 
contenu de la variable au cours du script). Pour illustrer la notion de type de variable, 
prenons les deux exemples suivants. 

Exemple 1 : 

var jour:String; 
Exemple 2 : 

var jour:Number; 

Dans le premier exemple, nous savons que nous avons l'obligation d'initialiser la variable 
avec une chaine de caracteres (comme « lundi » ou « jeudi »), alors que dans le deuxieme 
nous devons lui affecter un nombre (1 pour lundi, 3 pour mardi. . .). 

II existe de nombreux types de variables. Cependant, nous commencerons par vous 
presenter les quatre les plus utilises qui sont : String (chaine de caracteres), Number (nombre 
entier), Array (tableau) et Boolean (valeur booleenne de type vrai/faux). A chaque nouveau 
besoin de memorisation d'un type d' information vous decouvrirez, ou avez decouvert au 
travers des exemples de ce livre, un type specifique. 



Le choix d'un nom de variable 

Le nom d'une variable doit toujours etre representatif de la valeur stockee. II est preferable 
d' avoir un nom long et explicite plutot qu'une abreviation qui n'exprime rien de precis, 
comme a ou b... Avant de vous presenter des exemples de noms de variables, voici les 
principales raisons pour lesquelles les noms des variables doivent etre clairs. 

• Dans le cas d'un travail en equipe, la mise en commun de scripts est grandement faci- 
litee lorsque les noms des variables traduisent a eux seuls les informations qu'elles 
represented. 

• Lorsque vous devez effectuer des mises a jour de programmes plusieurs jours apres 
leur creation, il est plus facile de se souvenir de la fonctionnalite de chaque variable si 
elle possede un nom explicite. 

• Si vous transmettez un projet sur lequel vous avez travaille seul a une autre personne 
chargee d' assurer les mises a jour ou de continuer votre developpement, des noms de 
variables explicites permettent d'eviter la redaction d'un document expliquant le role 
de chaque variable et des autres fonctions. 
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Voici a present des exemples de noms de variables. A la lecture de ces quelques lignes, 
vous pourriez meme deviner le sujet de la production. 

var titreLegendeVignette: String; 

var categorieLegendeVignette: String; 

var et udi an tsLegendeVignette: Array; 

var pi tchFi 1 m: Stri ng ; 

var model_ectureVideo:Boolean; 

var tableauFichiersFilmsEnContinu: Array; 

var tableauNomsFilmsEnContinu: Array; 

var numeroFilmALi re:Number ; 

var nbrVignettesMosaic:Number; 

var nomImagePremierPlan:String; 

var imagePleinEcran:Boolean; 

var toucheShiftEnfoncee:Boolean; 

var messageAccueil PhotoGraphisme:String; 

var legendeVignetteSurvolee:CreationTexte; 

var numeroLigneCl iquee: Number; 

II s'agit de la realisation d'un book, presentant des travaux graphiques, dont nous avons 
extrait quelques noms de variables. Comme vous pouvez le constater, leurs noms sont 
longs, mais nous n'aurons pas de mal a comprendre ce qu'elles representent, contraire- 
ment aux variables ci-dessous : 

I var njs:Array; 
var sg:Number; 
var rar:Number; 

II aurait ete plus simple de les ecrire clairement : 

I var noms Des JoueursSelectionnes: Array; 
var scoreGlobal :Number; 
var reductionAvant Remise: Number; 



Interdiction 



Dans le nom d'une variable, vous n'avez pas le droit d'utiliser des caracteres accentues 
ou speciaux, ni meme d'espace. Ne commencez pas non plus le nom d'une variable par 
un chiffre ou une majuscule car, par convention, une capitale en debut de mot indique une 
classe. Pour finir, tentez de lire le nom de la variable ci-dessous : 

var numerossectionsretenues: Array; 

Vous avez surement du faire un effort de lecture pour dechiffrer les mots contenus dans le 
nom de la variable. Pour eviter cela, une technique consiste a ecrire un nom avec une capitale 
a chaque mot. 

var numerosSectionsRetenues: Array; 



Rappel 

Comme nous vous I'avons dit, n'utilisez pas de majuscule en debut de nom de variable. 
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Initialiser une variable 

Dans la section Declaration d'une variable de ce chapitre, nous avons evoque le terme 
initialisation sans 1' avoir defini. Voici de quoi il s'agit. 

Une initialisation consiste a donner une valeur initiale a une variable, eventuellement au 
moment de sa declaration. Pour cela, vous ecrivez le nom de la variable suivi de l'opera- 
teur = puis de la valeur a lui attribuer. 

Exemple 1 : 

var jour: String = "Lundi"; 
Exemple 2 : 

var jour:Number = 28; 



Remarque 

L'ajout d'espace avant et/ou apres le signe = est facultatif. 



Dans les deux exemples ci-dessus, nous initialisons les variables au moment de leur 
declaration. Mais dans certains cas, 1' initialisation aura lieu bien plus loin dans le script. 
Ce qui donne : 

var jour:String; 

... puis quelques lignes d' instructions plus bas dans le script : 

jour = "Lundi"; 

Attention, il ne faudra surtout pas reutiliser le mot-cle var et encore moins essayer de 
redefinir le type, ce qui occasionnerait une erreur. Ainsi, les exemples suivants : 

var jour:String; 
... puis quelques lignes d' instructions plus bas dans le script : 

var jour = "Lundi"; 
...ou encore : 

jour: String = "Lundi"; 
produisent une erreur. 

Pourquoi typer une variable ? 

La reponse a cette question est extremement simple : si vous ne typez pas les variables 
d'un script, son debogage sera plus fastidieux et vous vous priveriez ainsi de l'aide que 
peut vous apporter le compilateur au moment de la publication d'une animation. 
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En effet, lorsque vous publiez une animation par le raccourci clavier Ctrl-Entree (Windows) 
ou Commande -Entree (Mac), Flash fait appel a son compilateur pour transformer le 
fichier FLA en SWF. Au moment de cette publication, le compilateur verifie la validite 
du code contenu dans le fichier FLA et les differents fichiers AS qui y sont rattaches. Le 
fait de typer des variables aide le compilateur a deceler les erreurs de type. 



Definition 

Un compilateur est un programme charge d'interpreter des lignes d'instructions dans le but de transformer 
un fichier en un autre lisible par une application tierce. Flash possede un compilateur qui est sollicite au 
moment de la publication d'une animation. 



Voici un premier exemple : 

var gagnants:Array; 
. . .quelques lignes plus loin dans le script. . . 

gagnants = 3; 

Nous avons declare une variable de type tableau (Array) car nous souhaitons y stacker 
des prenoms d'individus. Apres l'ecriture de nombreuses lignes de code, vous finissez 
parfois par vous interroger sur l'interet, le role ou le sens de certaines variables que vous 
avez declarees au debut du programme (d'ou l'importance du nom donne au differentes 
instances et variables). Dans cet exemple, nous tentons d'affecter la valeur 3 a la variable 
gagnants, car nous pensons qu'il pourrait s'agir de memoriser le nombre de gagnants. Au 
moment de la publication de 1' animation, voila l'erreur qu'indique Flash ! 

1067: Contrainte implicite d'une valeur du type 1nt vers un type sans rapport Array. 

Au moment de sa creation, nous avons declare notre variable gagnants de type tableau car 
nous savions precisement ce qu'elle allait contenir : une liste de prenoms. Au moment de 
l'initialiser, nous pensons a tort qu'il s'agit d'une variable dans laquelle ont peut stacker 
un nombre. Le compilateur decouvre qu'il y a une erreur, il nous la signale et interrompt 
1' execution du programme. 

Si nous n'avions pas type la variable, aucune erreur ne se serait produite. Nous pourrions 
meme changer son contenu accidentellement. 

I var gagnants = ["David" , "Marine" , "Luna"] ; 
gagnants = 3; 

Ces deux lignes d'instructions sont correctes, elles ne produisent aucune erreur de 
compilation ! 

En conclusion, faites l'effort de typer toutes vos variables afin de beneficier de l'aide que 
le compilateur de Flash est capable de vous apporter. 
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Le type * 

Dans de rares cas, vous aurez besoin de typer une variable avec deux ou plusieurs types. 
Cela se produit notamment pour des variables locales dans une boucle for (in). Vous pourrez 
alors utiliser le caractere * pour signaler au compilateur un type multiple. 

Vous ne devez surtout pas abuser de cette possibility qui reduit l'aide que peut vous apporter 
le compilateur au moment de la publication. 

var elementsListeArticles:*; 

Modifier une variable 

Comme nous vous l'avons deja mentionne dans ce chapitre vous pouvez, a n'importe 
quel moment, modifier la valeur d'une variable. Cependant, faites tres attention a ne pas 
commettre l'une des deux erreurs suivantes : 

• Ne vous trompez pas dans la nature de l'information a stocker. Si vous avez declare un 
type String, vous devez saisir la valeur entre guillemets ou faire appel a la methode 
toStri ng( ) pour effectuer une conversion en chaine de caracteres. Si vous avez declare 
un nombre ou un booleen, vous ne devez surtout pas saisir la nouvelle valeur entre 
guillemets. 

• Ne reutilisez surtout pas le mot-cle var qui ne sert qu'au moment de la declaration. 
Voici quelques exemples d' affectation : 

• Variable de type String : nomVainqueur="Luna"; 

• Variable de type Number : nbrPointsEcran=12; 

• Variable de type Boolean : toucheShiftEnfoncee= true; 

• Variable de type Boolean : toucheShiftEnfoncee= ! toucheShiftEnfoncee; Cette instruc- 
tion permet d'inverser la valeur d'une variable booleenne : si la valeur de la variable 
toucheShiftEnfoncee est true, elle passera a false. 

• Variable de type Number : nbrPointEcran= nbrPointEcran + 20; 



Valeur null 

Pour effacer le contenu d'une variable, vous pouvez aussi definir sa valeur a nul l 



Portee d'une variable 

Avant de poursuivre la lecture des lignes qui vont suivre, referez-vous au chapitre 10 
pour apprendre une notion tres importante en programmation : la fonction. 

Vous pourriez penser qu'a partir du moment ou elle est declaree, une variable peut etre 
modifiee n'importe ou dans le programme. II n'en est rien, tout depend de l'endroit ou se 
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trouve sa declaration. Ce qui nous amene a aborder la notion tres importante de portee 
d'une variable. 



Prenez garde a la fonction ! 

Considerez attentivement le script ci-dessous 
Fichier de reference : Chapitre7/Porteel.fla 



var nomAuteur:String = "TARDIVEAU"; 

btVal idation.addEventListener(MouseEvent.MOUSE_DOWN,fenetreSortie) 

function fenetreSortie (evt:MouseEvent) ( 

trace(nomAuteur) ; 
} 



Remarque 

btVal idati on est le nom d'une occurrence de type Clip sur la scene. 



La variable nomAuteur a ete declaree dans le corps principal du script en-dehors de toute 
fonction. Elle est visible dans tout le script, a tous les niveaux, sur toutes les lignes 
d' instructions. Nous pouvons done nous y referer dans la fonction fenetreSorti e( ). 

Dans ce deuxieme exemple, nous allons declarer une variable dans la fonction fenetre- 
Sorti e( ) et tenter d'y faire reference en dehors de celle-ci. 

btVal idati on. addEventl_istener(MouseEvent.MOUSE_DOWN, fenetreSortie) ; 

function fenetreSortie(evt:MouseEvent) { 

var nomAuteur: String = "TARDIVEAU"; 

trace(nomAuteur) ; 
} 

trace(nomAuteur) ; 

Au moment de la publication de 1' animation, le compilateur de Flash nous renvoie un 
message d'erreur. 



1120: Acces a la propriete non definie nomAuteur. 

Comme la variable nomAuteur est declaree entre les accolades { } delimitant la fonction 
fenetreSortieO, elle n'est visible que dans cette partie du script. Elle n'est done pas 
reconnue en dehors de la fonction et toute tentative d'y acceder genere une erreur. 

Ce qu'on appelle la portee d'une variable est la partie du code dans laquelle cette variable 
est visible, done accessible. La variable nomAuteur du premier exemple a une portee 
globale, alors que celle du deuxieme exemple a une portee reduite a la fonction fenetre- 
SortieO. 
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En conclusion, si vous souhaitez qu'une variable puisse etre accessible depuis n'importe quel 
endroit du script, vous devez la declarer en debut de programme, a l'exterieur d'une fonction. 
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Si vous n'avez pas encore pris connaissance du chapitre 1, lisez les notions qui y sont 
abordees avant de poursuivre votre lecture. 

La portee d'une variable s' applique de la meme facon en programmation orientee objet. 

Fichiers de reference : Chapitre7/Portee2.fla et Main. as 

package { 

import fl ash. display. Sprite; 

public class Main extends Sprite { 

public var nomAuteur:String; 

function Main( ) { 

nomAuteur = "TARDIVEAU"; 

traceC'Depuis la fonction constructrice 'Main' : "+nomAuteur) ; 

afficherNomAuteur( ) ; 
} 
private function afficherNomAuteur( ) { 

traceC'Depuis la fonction 'afficherNomAuteur ' : "+nomAuteur) ; 



} 



Classe du document 

Rappelons que le fichier Portee2.fla possede le nom Main dans la palette Proprietes au niveau du 
champ de saisie Classe du document. 



La variable nomAuteur a ete declaree en dehors du constructeur de la classe et de la 
methode aff icherNomAuteuK ). De ce fait, elle peut etre utilisee a n'importe quel endroit 
dans le code. En revanche, si nous l'avions declaree et initialisee a l'interieur d'une fonction, 
elle n'aurait pas ete accessible a un autre endroit du script. 

package { 

import fl ash. display. Sprite; 

public class Main extends Sprite { 



function Main( ) { 

traceC'Depuis la fonction constructrice 'Main' : 

regl ageNomAuteurt ) 

afficherNomAuteur( ) ; 
} 



"+nomAuteur) ; 
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private function regl ageNomAuteur( ) { 
var nomAuteur: String = "TARDI VEAU" ; 
trace("Depuis la fonction ' reglageNomAuteur ' : 

} 

private function afficherNomAuteurt ) { 

traceC'Depuis la fonction 'afficherNomAuteur' 
} 



1120: Acces a la propriete non definie nomAuteur. 
1120: Acces a la propriete non definie nomAuteur. 



"+nomAuteur) 



"+nomAuteur) 



Lecode ci-dessus genere une erreur car les fonctions MainO (constructeur) et afficherNo- 
mAuteur( ) tentent d'acceder a une variable dont la portee est limitee. En effet, la variable 
nomAuteur a ete declaree et initialisee dans la fonction reglageNomAuteurt ), et sa portee se 
limite done au bloc de code contenu entre les accolades private function reglageNomAu- 
teurO { }. 



Rappel 

Un bloc de code commence par une accolade ouvrante et se termine par une accolade fermante. 



public, private, static 

Lorsque vous declarez des variables dans une classe, vous devez non seulement les 
prefixer avec le mot-cle var, mais vous pouvez, et meme dans certains cas devez, ajouter 
un specificateur de controle d' acces (public, private ou static). 

C'est en particulier le cas lorsqu'on travaille avec des classes et des scripts repartis 
dans plusieurs fichiers. II faut alors gerer la portee d'une variable d'un fichier par rapport 
a un autre. 



Les variables static 

Considerons l'exemple suivant, ou nous definissons une classe de document nommee 
MainCreaTexte( ) dans laquelle nous declarons une variable intitulee nomAuteur. Nous aimerions 
que cette variable soit accessible a partir d'une autre classe intitulee CreaTextet ). 

Afin qu'une variable soit accessible depuis une autre classe, il faut habituellement instancier 
la classe dans laquelle elle se trouve pour y acceder a partir de 1' instance. Dans notre cas, 
cela n'est pas possible et pourtant nous souhaitons tout de meme atteindre la variable 
nomAuteur. Nous allons tout simplement transformer notre variable en variable stati c afin 
d'y avoir acces de n'importe ou des lors qu'on precise en prefixe le nom de la classe. 

Fichiers dereference : Portee3.fla, MainCreaTexte.as et CreaTexte.as. 

Voici le script de la classe du document Portee3.fla. Vous pouvez constater que nous 
avons ajoute le specificateur de controle d'acces static devant le mot-cle var. 
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package { 

import flash. display. Sprite; 

public class MainCreaTexte extends Sprite { 

public static var nomAuteur:String; 

function MainCreaTextet ) { 

new CreaTexte( ) ; 
} 
} 
} 

Cela autorise l'acces a la variable nomAuteur a partir de la classe CreaTexteO dans la 
mesure ou elle est prefixee par le nom de la classe : MainCreaTexte. nomAuteur. 

package ( 

import fl ash. display. Sprite; 

public class CreaTexte extends Sprite { 

function CreaTexteO { 

MainCreaTexte. nomAuteur = "TARDIVEAU"; 

trace(MainCreaTexte. nomAuteur) ; 
} 



) 

Un telle variable, qui appartient de ce fait a la classe et non a une instance (ou occur- 
rence) de classe, permet de conserver une information accessible depuis n'importe quel 
endroit a n'importe quel moment. Cela s'avere fort utile pour acceder a des variables qui 
representent des informations telles que des scores de jeu, un nom d'utilisateur, etc. 

Les variables public et private 

Comme nous venons de l'expliquer, une variable static, est accessible depuis n'importe 
quelle autre classe, mais elle appartient, en revanche, a la classe dans laquelle elle a ete 
declaree. Par opposition a cette notion, decouvrons a present comment associer une variable 
a une instance de classe. 

Fichiers dereference : Portee4.fla, MainJeu.as et Bateau. as. 

Dans cet exemple, nous definissons une classe de document intitulee MainJeu.as dans 
laquelle nous declarons une variable. 

public var bateaulsBateau; 

Nous instancions ensuite la classe Bateau ( ). 

bateaul = new Bateaut ) ; 
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Puis nous definissons des variables d' instance. 

Ibateaul.nom="L'ami rale"; 
bateaul. longueur=130; 

Si nous pouvons initialiser ainsi ces variables, en precisant le nom d'instance, c'est parce 
qu'elles ont ete declarees comme publ i c dans la classe Bateau. Sans cela, il serait impossible 
de faire reference aux variables nom et 1 ongueur. 

Voici les deux classes MainJeu et Bateau pour vous rendre compte de leurs structures 
respectives. 

package { 

import flash. display. Sprite; 

public class MainJeu extends Sprite { 

public var bateaul:Bateau; 

function MainJeu( ) { 
bateaul = new Bateau( ) ; 

bateaul .nom="L'ami rale"; 
bateaul . longueur=130; 

trace(bateaul.nom) ; 
trace (bateaul. longueur) ; 



et 



package { 

import flash. display. Sprite; 

public class Bateau extends Sprite 

public var nom:String; 
public var longueur:Number; 



} 

Si nous remplacions le specificateur publ 1 c par pri vate, il deviendrait alors impossible de 
faire reference aux variables nom et longueur, car elles ne seraient accessibles qu'a partir 
de la classe. 
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Les constantes 

Une information est parfois stockee dans une variable sans qu'il soit necessaire de 
pouvoir la modifier dans le script. C'est ce qu'on appellera une constante. Elle se declare 
avec le mot-cle const, comme dans l'exemple suivant : 

I const var TVA55:Number = 0.055; 
const var remiselO: Number = 0.10; 
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Les tableaux 



Dans le chapitre precedent, nous avons decouvert que les variables nous permettent de 
memoriser une information arm de pouvoir y faire reference en utilisant une etiquette au 
lieu de la valeur elle-meme. 

Dans certains cas, vous aurez besoin de memoriser plusieurs valeurs dans une meme 
variable, c'est le role des tableaux, aussi appeles listes ou array. 

Nous allons voir que cette technique est extremement simple d'emploi : un tableau est 
generalement declare avec le mot-cle var et le type Array. On utilise egalement des speci- 
ficateurs de controle d'acces, si necessaire. Enfin, l'acces aux elements d'un tableau se 
fait par des index. 



Creer un tableau 

Vous disposez de deux techniques pour creer un tableau. Vous pouvez utiliser la classe 
Array de la facon suivante : 

var semaine:Array = new ArrayCLundi " ."Mardi " ."Mercredi ") ; 

ou employer des crochets comme dans l'exemple ci-dessous : 

var semaine:Array = ["Lundi ", "Mardi ", "Mercredi "] ; 

Chaque element du tableau, qualifie d'entree, est separe des autres par une virgule. Dans 
cet exemple, nous avons stocke des chaines de caracteres, c'est pourquoi nous les avons 
placees entre guillemets, mais nous aurions pu memoriser des elements d'un autre type : 

• Des nombres, qui doivent alors etre saisis sans guillemets en utilisant le point comme 
separateur, s'il s'agit d'un nombre decimal comme 8.3. 
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• Des variables. 

• Des booleens. 

• Des noms d'instances. 

• Des tableaux. 

En fonction de vos besoins, vous serez en outre amenes a ecrire un jour ou 1' autre un 
programme dont les tableaux pourront contenir d'autres types de donnees, comme ceux 
que nous allons examiner ci-dessous. 



Remarque 

Laide officielle de I'ActionScript proposee par Adobe utilise le terme element pour designer I'entree d'un 
tableau, ce qui est I'appellation la plus courante. 



Tableau de proprietes ou tableau assoclatif 

II serait pratique de pouvoir ecrire dans un programme les lignes d' instructions ci-dessous 
pour afficher, par exemple, les noms des capitales de la France et de l'Angleterre : 

It race (capi tales. France) ; 
trace(capitales.Angleterre) ; 

C'est tout a fait possible, mais pour que les noms de Paris et Londres puissent etre affiches, 
vous allez devoir creer un tableau associatif, appele aussi tableau de proprietes. D'un 
point de vue purement programmatique, nous n' allons pas creer un tableau, mais un objet 
qui va contenir des proprietes, au meme titre qu'une occurrence possede des proprietes 
(comme x, y, alpha, rotation, etc.). 

Commencez par declarer une variable en specifiant le type Object. 

var europe:Object 
Assignez ensuite a cette variable une paire d' accolades pour indiquer une liste de valeurs. 

var europe:Object = {} 
Definissez entre ces accolades une serie d' entrees qui se presentent sous la forme : 

nomDeLaPropriete: valeur 

Toutes les entrees doivent etre separees par des virgules, comme nous l'avons vu avec les 
tableaux au debut de ce chapitre. 

Attention : le nom qui figure devant les deux points ne doit pas etre place entre guillemets 
car il s'agit d'une propriete. De meme, si la valeur est un nombre, vous ne devez pas la 
saisir entre guillemets contrairement a une chaine de caracteres. Voici deux exemples 
pour illustrer nos propos. 

I var capitales :0bject = {France: "Paris" .Angleterre: "Londres" .Espagne: "Madrid"} ; 
var populations:Object = {France:62354654,Angleterre:64234845,Espagne:47658475} ; 
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Un tableau a deux dimensions 

Paradoxalement, nous avons utilise jusqu' a present le terme tableau pour faire reference 
a une liste de donnees, bien que cela ne soit pas le sens commun, puisqu'un tableau est 
generalement constitue au minimum de 2 colonnes et de 2 lignes (en programmation, un 
tableau peut tout de meme ne posseder qu'une seule colonne ou une seule ligne, ce qui 
revient en fait a une simple liste d'elements). 

Nous avons egalement indique qu'un tableau peut contenir des elements de type tableau. 
Nous allons expliciter cette notion. 

En effet, vous pouvez creer ce qu'on appelle communement un tableau a deux dimensions. 
Pour cela, vous devez creer plusieurs tableaux, avec des entrees de type quelconque, puis, 
creer un tableau supplemental qui regroupe tous les tableaux precedents. 

Imaginez un grand magasin etabli sur quatre niveaux. 

var etageO:Array=["Jouets pour enfants" , "Habits pour enfants" ."Lingerie feminine"]; 
var etagel:Array=["Parfumerie" ."Agence de voyage" ."Accueil "] ; 
var etage2:Array=["Al i mentation exotique" , "Cafe" , "Vaisselle"] ; 
var etage3:Array=["Linge de maison" , "Vetements Homme"]; 

var lePrendTout:Array=[etageO,etagel,etage2,etage3] ; 

Nous stockons dans des tableaux simples des valeurs de type chaine de caracteres, puis 
generons un tableau a deux dimensions qui contient l'ensemble des donnees. Chaque 
element du tableau lePrendTout est done un tableau. Consultez la section Lire une entree 
de tableau pour comprendre comment acceder a une entree et ainsi lire sa valeur ; vous 
comprendrez alors pourquoi nous parlons de deux dimensions. 

L'avantage de creer de tels tableaux est de pouvoir manipuler de nombreuses donnees a 
partir d'une seule etiquette, e'est-a-dire le nom d'un tableau de synthese. 

Un tableau a deux dimensions contenant des tableaux associatifs 

Vous pouvez combiner des tableaux associatifs ou de proprietes dans un tableau normal. 
Cela vous donnera davantage de souplesse dans la gestion de donnees plus complexes. 
Examinez l'exemple ci-dessous pour mesurer la portee de notre propos. 

var europe:Object = {France: "Paris" .Angleterre: "Londres" .Espagne: "Madrid"} ; 
var afrique:Object = {Niger: "Niamey" .Congo: "Brazzaville" .Gabon: "Libreville"} ; 
var monde:Array = new Array(europe.afrique) ; 

Nous avons cree deux tableaux associatifs qui possedent des proprietes correspondant a 
des noms de pays et nous avons defini leurs valeurs en faisant reference aux noms de leur 
capitale. 

Pour obtenir l'ensemble que nous avons appele monde, nous declarons et initialisons un 
tableau a deux dimensions. Nous aurions egalement pu imbriquer ces tableaux associatifs 
dans un autre. 
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var europe:Object = {France: "Paris" .Angleterre: "Londres" .Espagne: "Madrid"} ; 
var af rique:Object = {Niger: "Niamey" .Congo: "Brazzavil le" .Gabon: "Librevil le"} ; 
var monde:Object = {europe:europe,afrique:af rique} ; 

trace(monde.europe. France) ; 

Creer un tableau vide 

Au cours de la lecture d'une animation, vous aurez tres souvent besoin de memoriser des 
informations que vous ne connaissez pas a l'avance ; par exemple le panier d'un site 
marchand, dans lequel vous pouvez ajouter et supprimer des articles. Nous allons done 
apprendre a ajouter et supprimer des entrees dans un tableau. Pour cela, il faut prealable- 
ment creer un tableau vide. La technique est simple et vous la connaissez deja ! 

var scoresJoueurs:Array = []; 

on 

var scoresJoueurs:Array = new ArrayO; 

II sufht en effet de creer un tableau dans lequel vous ne specifiez aucune entree, contrai- 
rement a ce que nous avons fait jusqu'a present. 

Si vous souhaitez creer un tableau qui contient des entrees vides, utilisez les lignes 
d' instructions ci-dessous : 

I var vil les:Array ; 
vil les = new Array( ) ; 
villes[9]="" : 

De cette facon, vous creez dix entrees vides portant les index a 9. La notion d'index est 
explicitee dans la section suivante. 

Lire une entree de tableau 

Pour constituer nos tableaux, nous avons utilise la classe Array, mais egalement une paire 
de crochets [ ] . Ce sont ces deux caracteres que nous allons utiliser pour lire une entree de 
tableau. Avant de donner un exemple, nous devons preciser que chaque element d'un 
tableau possede un index, e'est-a-dire un numero, que nous allons utiliser pour acceder a 
1' element. Par convention, la premiere entree d'un tableau possede toujours 1' index 0. 
Ainsi, pour afficher le mot Lundi, premier element du tableau ci-dessous, nous devons 
mentionner le chiffre 0. 

I var semaine:Array = new ArrayC'Lundi " , "Mardi " , "Mercredi " ) ; 
trace(semaine[0] ) ; 

Que vous utilisiez la classe Array ou les crochets pour creer un tableau, la lecture sera 
toujours conduite de la meme facon. 

Pour lire la derniere entree d'un tableau, utilisez la ligne d' instruction suivante : 

| trace(semaine[semaine.length-l]) ; 
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L'instruction semaine. length donne la taille du tableau, done son nombre d'elements, 
valeur a laquelle il suffit d'enlever 1 pour obtenir l'index du dernier element. Pour parcourir 
toutes les entrees d'un tableau, referez-vous au chapitre 10 qui traite des boucles for( ). 

Lire I'entree d'un tableau a deux dimensions 

Nous allons utiliser le meme principe pour lire les elements d'un tableau a deux dimen- 
sions, mais en ajoutant un deuxieme index. 

var etageO:Array=["Jouets pour enfants" , "Habits pour enfants" ."Lingerie feminine"]; 
var etagel:Array=["Parfumerie" ."Agence de voyage" ."Accueil "] ; 
var etage2:Array=["Al i mentation exotique" ."Cafe" , "Vaisselle"] ; 
var etage3:Array=["Linge de maison" , "Vetements Homme"]; 

var lePrendTout:Array=[etageO,etagel,etage2,etage3] ; 

trace(lePrendTout[l][2]); 

Dans cet exemple, la premiere paire de crochets fait reference a l'une des entrees du 
tableau lePrendTout, et plus precisement a son deuxieme element, le tableau etagel. A 
l'interieur de ce dernier, la deuxieme paire de crochets fait reference a I'entree portant 
l'index 2, e'est-a-dire Accuei 1 . 



Lire I'entree d'un tableau associatif 

La technique de lecture d'une entree d'un tableau associatif est extremement simple, car elle 
est comparable a la lecture des proprietes d'une occurrence. Vous devez faire reference 
au tableau, qui est avant tout un objet, puis indiquer ensuite le nom d'une des proprietes 
separee par un point. 

var europe:Object = {France: "Paris" .Angleterre: "Londres" .Espagne: "Madrid"} ; 
var afrique:Object = {Niger: "Niamey" .Congo: "Brazzaville" .Gabon: "Libreville"} ; 

traceCeurope. France) ; 



Lire I'entree d'un tableau a deux dimensions contenant un tableau 
associatif 

Pour lire I'entree d'un tableau a deux dimensions contenant un tableau associatif, vous 
devez combiner les deux techniques de lecture precedentes de la facon suivante : 

var europe:Object = {France: "Paris" .Angleterre: "Londres" , Espagne: "Madrid"} ; 
var afrique:Object = {Niger: "Niamey" .Congo: "Brazzaville" .Gabon: "Libreville"} ; 
var monde:Array = new Array(europe.afrique) ; 

trace(monde[0] .France) ; 

Ce code fait tout d'abord reference a l'une des entrees du tableau a l'aide de son index, 
puis precise le nom de la propriete a utiliser. 
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Exemple 1 

Fichier de reference : Chapitre8/Tableau2.fla 

Dans cet exemple, sans l'utilisation d'un tableau, il faudrait effectuer de nombreuses 
comparaisons pour af richer le jour et le mois sur la scene. 

var numeroJour:Number=0; 

var semaine:Array = new ArrayC'Lundi " , "Mardi " , "Mercredi " ."Jeudi " ."Vendredi " , 
*»"Samedi " , "Dimanche") ; 



btSui van t. add Event Li stener(MouseEvent .M0USE_D0WN, jourSui vant) ; 
bt Precedent. addEvent Listener (Mouse Event. M0USE_DOWN , jour Precedent) ; 

function jourSuivant (evt :MouseEvent) { 

numeroJour++; 

if (numeroJour>6) numeroJour=6; 

nomJourSemaine.text = semaine[numeroJour] ; 
} 

function jourPrecedent (evt:MouseEvent) { 

numeroJour--; 

if (numeroJouKO) numerojour=0; 

nomJourSemaine.text = semaine[numeroJour] ; 
} 



nomJourSemaine.text 



'Lundi " ; 



Exemple 2 



Fichier de reference : Chapitre8/Tableau3.fla 

Dans ce deuxieme exemple, l'utilisation d'un tableau s'avere etre la meilleure solution 
pour obtenir les noms des jours et des mois. Precisons que la classe Date( ) va d'ailleurs 
nous renvoyer des valeurs comprises entre et 6 pour les jours de la semaine et de a 1 1 
pour les mois. Nous allons les utiliser pour faire reference aux index des deux tableaux. 

var jour:String; 
var dateJounString; 
var mois:String; 
var annee:Number; 

var 1 iste_semaine:Array = new ArrayC'Lundi ", "Mardi ", "Mercredi ", "Jeudi ", "Vendredi " , 
*»"Samedi " , "Dimanche") ; 

var 1 iste_mois:Array = new Array( "Jan" , "Fev" ,"Mar" , "Avr" ,"Mai " , "Juin" , "Juil " , "Aou" , 
*»"Sep" , "Oct" , "Nov" ,"Dec") ; 

var instantiate = new DateO; 

jour = 1 iste_semaine[instant.getDay( )] ; 
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date Jour=instant. get Date ( ) .toString( ) ; 
mois=l iste_mois[instant.getMonth( )] ; 
annee=instant.getFul lYearO; 

affichageDate.text = jour+" "+dateJour+" "+mois+" "+annee.toString( ) ; 



Modifier une entree de tableau 

Nous avons appris a creer et lire un tableau ; nous devons a present apprendre a modifier 
une entree. Une fois encore la technique est extremement simple, car il suffit de faire 
reference a 1' element a modifier et de lui affecter une nouvelle valeur. 

Supposons que vous ayez declare et initialise le tableau suivant, en commettant une 
erreur sur le mot Nancy. 

var vil les:Array = ["Paris" , "Toulon" , "Brest" ,"Nacy"] ; 

Nous pouvons modifier cet element, qui porte 1' index 3, de la facon suivante : 

villes[3] = "Nancy"; 



Remarque 

Si vous essayez de lire une entree qui n'existe pas, le lecteur Flash vous renvoie la valeur undefined. Si 
vous tentez de changer la valeur d'un element qui n'existe pas, des entrees vides seront ajoutees dans le 
tableau jusqu'a la position de I'element que vous souhaitiez modifier ; puis un dernier element sera cree et 
initialise a la valeur indiquee. 



Pour vider la valeur d'une entree, assignez-lui tout simplement la valeur nul 1 . 

Nous allons a present vous exposer deux exemples relativement complexes, mais qui 
vous donneront un apercu de la notion de modification d'une entree de tableau. 



Exemple 1 

Fichier de reference : Chapitre8/Tableau4.fla 

Dans ce premier exemple, nous avons dispose quatre zones de saisie sur la scene. Lorsque 
nous modifions l'une d'entre elles, la valeur saisie est enregistree dans le tableau etatCases. 

var etatCases: Array = new Array( "Prenom" , "Prenom" ."Prenom" , "Prenom") ; 

nomJoueurO. add Event Listener (Event. CHANGE, mi seAJourTableau) 
nomJoueurl .add Event Listener (Event. CHANGE, mi seAJourTableau) 
nomJoueur2. add Event Listener (Event. CHANGE, mi seAJourTableau) 
nomJoueur3. add Event Listener (Event. CHANGE, mi seAJourTableau) 

function miseAJourTableau(evt:Event) { 

etatCases [evt. cur rentTarget. name. substrt 9, l)]=evt.currentTarget. text; 

listeComplete.text = etatCases. toStringt ) ; 
} 
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Comme vous pouvez le constater, la fonction de rappel est la meme pour routes les zones 
de saisie. La ligne d'instruction ci-dessous permet de determiner l'instance qui est en 
cours de changement, ce qui nous permet d'obtenir un numero d'index pour modifier une 
entree precise du tableau etatCase. 

etatCases [evt. currentTarget. name. substr( 9, l)]=evt. currentTarget. text; 

L'objet evt, accompagne de sa propriete currentTarget, renvoie l'instance en cours de 
changement. La propriete name precise son nom et la methode substr( ) permet de recupe- 
rer le caractere portant 1' index 9 (le dixieme caractere du mot). II s'agit du numero place 
a la fin de chaque nom d' instance, comme 2 pour le dixieme caractere de l'instance 
nomJoueur2. II ne nous reste plus qu'a l'utiliser comme index du tableau etatCases. 



Remarque 

Nous utilisons la methode toStri ng( ) pour convertir le tableau en chaine de caracteres. 



Exemple 2 

Fichier de reference : Chapitre8/Tableau5.fla 

Ce deuxieme exemple est plus simple, car nous nous contentons de reprendre le meme 
principe que 1' exemple 1 en l'adaptant a un nouveau besoin. Un clic sur une occurrence 
permet de basculer la valeur booleenne d'une entree du tableau etatCases. Nous l'utilisons 
alors pour regler l'opacite de l'instance cliquee. 

var etatCases:Array = new Arrayttrue, true, true, true) ; 



ca seO. addEvent Li s tener(MouseEvent.MOUSE_DOWN,changerVa leu r Entree) 
easel. addEvent Li stener(MouseEvent.MOUSE_DOWN,changerVa leu r Entree) 
case2. addEvent Li stener(MouseEvent.MOUSE_DOWN,changerValeur Entree) 
case3. addEvent Li stener(MouseEvent.MOUSE_DOWN,changerValeur Entree) 



function changerValeurEntree(evt:MouseEvent) { 
var numeroCase: Number = Number(evt. currentTarget. name. substr(4, 1) ) ; 
etatCases[numeroCase] = ! etatCases[numeroCase] ; 
evt. currentTarget. alpha = Number(etatCases[numeroCase] )+0.5; 

} 

Lorsque les valeurs booleennes true et false sont converties en nombres par l'interme- 
diaire de la classe Number ( ), nous obtenons respectivement les chiffres 1 et 0. 



Ajouter une entree 

Pour ajouter une entree a un tableau, vous disposez de plusieurs techniques. Tout depend 
de l'endroit dans le tableau oil l'ajout a lieu : a la fin, au debut, au milieu ou a une position 
encore inexistante, en specifiant un index superieur au nombre d' elements du tableau. 
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Commencons par la derniere technique que vous rencontrerez souvent dans les livres et/ 
ou autres publications numeriques. 

Par index 

Considerons la declaration suivante : 

var jours:Array = new ArrayO; 

Nous allons simplement definir la valeur des trois premieres entrees du tableau en faisant 
reference aux index 0, 1 et 2, elements qui n'existent pas encore. 

Ijours[0]="Lundi"; 
jours[l]="Mardi " ; 
jours[2]="Mercredi " ; 

L'afhchage des elements du tableau est sans surprise : 



b 



tracet jours) ; 

Lundi ,Mardi .Mercredi 



Cette technique est simple, mais elle ne s'applique pas a tous les cas. 

A la fin d'un tableau 

Imaginons, a present, que nous disposions deja d'un tableau et que nous souhaitions tout 
simplement ajouter une entree a la fin. Pour cela, vous allez utiliser la methode push( ) de 
la classe ArrayO. 

I var jours:Array = new ArrayC'Lundi ", "Mardi ", "Mercredi ") ; 
jours. pushCJeudi ") ; 

La valeur de l'entree a inserer est un parametre de la methode push( )et doit done etre 
placee a l'interieur des parentheses. Si plusieurs elements doivent etre ajoutees, separez-les 
simplement par des virgules. 

jours. push ("Vendredi " , "Samedi " , "Dimanche" ) ; 

C'est la methode que vous utiliserez le plus frequemment. 

Au debut d'un tableau 

Dans certains cas, vous devrez ajouter un element au debut du tableau et non a la fin. 
Vous utiliserez alors la methode unShift( ) de la classe ArrayO. 

I var jours:Array = new ArrayC'Mardi ", "Mercredi ") ; 
j our s.unshi ft ("Lundi ") ; 

De f aeon analogue a la methode p u s h O , vos pouvez inserer plusieurs entrees si vous specifiez, 
enparametres de la methode unShiftO, plusieurs valeurs separees par des virgules. 
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Au milieu d'un tableau 

Ce type d'ajout est plus rare, mais il est indispensable de le connaitre. Cela vous evitera 
des manipulations complexes avec plusieurs tableaux, le jour ou vous en aurez besoin. 
Vous allez utiliser la methode spl ice( ) avec 3 parametres. 

Ivar jours:Array = new ArrayCLundi " , "Mardi " , "Jeudi ") ; 
jours. spl ice (2,0, "Mercredi ") ; 

Le premier parametre precise l'index a partir duquel l'insertion de la nouvelle entree doit 
avoir lieu. Le deuxieme parametre indique un nombre eventuel d' entrees a supprimer 
avant d'effectuer l'insertion ; il est generalement regie a 0, comme dans notre exemple. 
Enfin, le troisieme parametre correspond a la valeur de la nouvelle entree a inserer. 

Vous utiliserez egalement cette methode pour supprimer une ou plusieurs entrees dans un 
tableau, mais sans definir le troisieme parametre et en donnant au deuxieme le nombre 
d'elements a supprimer, nombre forcement different de 0. 

Voici deux exemples tres interessants qui demontrent l'utilisation de la methode push( ) a 
travers deux cas d'ecole. 

Exempie 1 

Fichier de reference : Chapitre8/Tableau6.fla 

A chaque clic sur la scene, la coordonnee horizontale de la position de la souris est memori- 
see dans un tableau. Pour les besoins de la demonstration, nous affichons le contenu du 
tableau sur la scene, ce que nous ne ferions probablement pas dans un cas concret. 

var 1 isteCoordonnees:Array = new ArrayO; 

stage.addEventListener(MouseEvent.MOUSE_DOWN,ajouterPoint) ; 

function ajouterPoint(evt:MouseEvent) { 
1 isteCoordonnees.push(mouseX) ; 
affichageCoordonnees.text = 1 isteCoordonnees.toString( ) ; 

} 

Exemple 2 

Fichier de reference : Chapitre8/Tableau7.fla 

Un inventaire, autre cas d'ecole... Vous devez deplacer des occurrences dans une zone 
precise de l'interface pour les memoriser dans le but de les reutiliser par la suite. Ce 
script n'est pas optimise car, nous n'avons volontairement pas utilise de boucle for(), 
cependant il permet d'illustrer le mecanisme de gestion d'un glisser-deposer qui conduit 
a modifier les elements d'un tableau. 

Ivar inventaire:Array = new ArrayO; 
article0.nom="Poi res" ; 
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articlel.nom="Pommes" ; 
a rticle2.nom=" Raisin" ; 
a rticle3.nom=" Cerises" ; 

article0.numeroListe=-l 
articlel.numeroListe=-l 
article2.numeroListe=-l 
article3.numeroListe=-l 



a rticleO.addEvent Listener (Mouse Event. M0USE_DOWN,depl a cer) 
a rticl el. addEvent Listener (Mouse Event. M0USE_DOWN,deplacer) 
a rti cle2.addEvent Listener (Mouse Event. M0USE_DOWN,depl a cer) 
a rti cl e3. addEvent Listener (Mouse Event. M0USE_DOWN,depl a cer) 

a rti cleO. addEvent Listener (Mouse Event. MOUSE_UP,relacher) 
a rticl el. addEvent Listener (Mouse Event. MOUSEJJP.relacher) 
a rti cle2. addEvent Listener (Mouse Event. MOUSE_UP,relacher) 
a rti cle3. addEvent Listener (Mouse Event. MOUSE_UP,relacher) 

function deplacer(evt:MouseEvent) { 
evt.currentTarget.startDrag( false) ; 



} 



function relacher(evt:MouseEvent) { 
stopDragt ) ; 
if (evt.currentTarget.x>350 && evt.currentTarget.numeroListe==-l) 

inventaire.push(evt.currentTarget.nom) ; 

evt .currentTarget.numeroListe = inventaire.length-1; 
} 
if (evt.currentTarget.numeroListe>=0 && evt .currentTarget.x<350) ( 

i n venta ire. splice (evt. cur rentTarget.numero Li ste.l) ; 

evt .cur rentTarget.numero Lis te=-l; 
} 
1 isteArticles.text = inventai re.toString( ) ; 



Supprimer une entree 

A la fin dun tableau 

De la me me facon que vous utilisez la methode push( )pour aj outer une entree a la tin 
d'un tableau, vous pouvez la retirer avec la methode pop( ). 

Son emploi est tres simple, il suffit de l'appeler a partir du nom du tableau : 

Ivar jours:Array = new ArrayC'Lundi " , "Mardi " , "Mercredi") ; 
jours. pop(); 

Apres l'execution de ces deux lignes d' instructions, le tableau jours ne contiendra plus 
que deux elements : Lundi et Mardi. 
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Au debut d'un tableau 

Pour ajouter une entree au debut d'un tableau, nous avons utilise la methode unShlftO ; 
pour la supprimer, nous allons utiliser la methode shift( ). 

Ivar jours:Array = new ArrayCLundi " , "Mardi " , "Mercredi ") ; 
jours. shiftt ) ; 

Apres l'execution de ces deux lignes d'instructions, le tableau jours ne contiendra plus 
que deux entrees : Mardi et Mercredi. 

Au milieu d'un tableau 

Comme nous l'evoquions a propos de l'ajout d'une entree au milieu d'un tableau, nous 
allons utiliser la methode spl i ce( ) avec seulement deux parametres. 

Ivar jours:Array = new ArrayCLundi ", "Mardi", "Mercredi " ."Jeudi "."Thursday" ."Vendredi") ; 
jours. splice(4,l) 

Le premier parametre precise l'index a partir duquel la suppression doit avoir lieu. Le 
deuxieme parametre indique le nombre d' elements a supprimer. Generalement, les 
elements sont supprimes un par un, ce dernier parametre est done la plupart du temps 
fixe a 1. 

Apres l'execution des deux lignes d'instructions ci-dessus, le tableau jours contiendra les 
memes elements qu'au depart a l'exception de celui d'index 4, e'est-a-dire le cinquieme 
du tableau, Thursday. 



Trier les entrees d'un tableau 

Lorsque vous creez ou ajoutez des entrees dans un tableau, vous ne le faites pas obliga- 
toirement dans l'ordre alphabetique ou croissant. C'est pourquoi il est possible de trier 
les entrees d'un tableau a n'importe quel moment. Vous utiliserez pour cela les metho- 
des sort( ) (pour les tableaux avec index) et sortOn( ) (pour les tableaux associatifs) de la 
classe ArrayO. 

Considerons l'exemple suivant : 

var jours:Array = new Arrayt "Eva" ."Beatrice" ."Jul ien" , "David" , "Marine" , "Luna") ; 

Comme vous pouvez le constater, les noms ne sont pas tries. La ligne d'instruction ci- 
dessous permet d'effectuer un tri par ordre croissant : 

jours. sort( ) 

L'instruction suivante trie le tableau par ordre decroissant, comme l'indique la constante 

DESCENDING : 

jours. sort (Array. DESCENDING); 
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La classe Array( ) propose egalement d'autres options de tri : 

• Array. CASEINSENSITI VE 

• Array. UNIQUESORT 

• Array. RETURNINDEXEDARRAY 

• Array. NUMERIC 

Enfin, si vous souhaitez trier les elements d'un tableau dans l'ordre inverse, utilisez la 
methode reverseO. 



Filtrer un tableau 



Avec la methode filterO de la classe ArrayO, vous allez decouvrir qu'il est possible de 
generer un nouveau tableau sans etre oblige de le parcourir a l'aide d'une boucle f or( ) 
accompagnee d'une structure conditionnelle. 

Prenons l'exemple d'une liste de prenoms avec un prefixe propre a chaque pays (f r, i t, es 
et gb). Nous aimerions generer un nouveau tableau contenant seulement les noms fran- 
cais (ceux ayant pour prefixe f r), ce qui revient a filtrer le tableau. 



Iva 



r participants:Array = new ArrayC'frFrancois" , "itLuna" , "frMarine" , "esJuan" , 
"gbDoglas" , "itGina" , "f rMarc") ; 



Nous commencons par creer un nouveau tableau qui contiendra les entrees filtrees. 

var nomsFrancais:Array ; 

Nous le remplissons avec les elements obtenus par la methode filter (), qui contient le 
nom de la fonction de rappel qui effectue le traitement approprie. 

noms Franca is=pa rticipants.fi Iter (sleet ion Franca is) ; 

Pour qu'un element soit nitre et done selectionne, la fonction de rappel doit renvoyer la 
valeur true pour l'element concerne. 

I function slectionFrancais(nomEntree:*, indexn'nt, arr:Array) :Boolean { 
return nomEntree.substr(0,2)=="f r" ; 
) 

Dans cet exemple, nous cherchons a savoir si les deux premieres lettres d'une entree sont 
f r. Voici le script global. 

var nomsFrancais: Array ; 

var participants:Array = new ArrayC'frFrancois" , "itLuna" , "frMarine" , "esJuan" , 
^"gbDogl as" , "itGina" , "f rMarc") ; 
nomsFrancais=participants.filter(slectionFrancais) ; 
trace(nomsFrancais) ; 

function slectionFrancais(nomEntree:*, index:int, arr:Array) { 

return nomEntree.substr(0,2)=="f r" ; 
} 



ActionScript 3 - Programmation sequentielle et orientee objet 



Dans cet autre exemple, un nouveau tableau intitule mei 1 1 eursScores est genere a la suite 
d'un filtre qui recherche des valeurs superieures ou egales a 100. 

var mei 1 leursScoresrArray ; 

var scores:Array = new Array(125,78,65,98,114,99,139) ; 
meil leursScores=scores.fil ter(scoreSupAlOO) ; 
tracedneil 1 eursScores) ; 

function scoreSupAlOOdescore:*, indexrint, arr:Array) { 

return lescore >= 100; 
} 
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Les structures conditionnelles 



L'interactivite d'une animation Flash est tres souvent geree par 1'evaluation de certaines 
conditions. C'est pourquoi la plupart des scripts que vous redigerez contiendront des 
structures conditionnelles. 



Structure conditionnelle if() 



Preambule 

Avant de realiser ensemble nos premiers tests, commencons par un petit rappel : il existe differents types 
de variables, tels que String, Number, Array, etc., mais il en est un qui va particulierement nous etre 
utile pour effectuer un test : le type booleen (Boolean). Ce qui caracterise une variable de ce type est 
qu'elle ne peut prendre que les deux valeurs true (pourvrai)ou false (pour faux). 



Pour effectuer un test dans un script, il existe de nombreuses syntaxes. Nous les aborderons 
d'ailleurs toutes au cours de ce chapitre, mais commencons par la plus simple : 



if (scoreJoueur>200) bonus = 10; 



II est egalement possible d'ecrire cette structure sur plusieurs lignes, les deux ecritures 
etant equivalentes : 



if (scoreJoueur>200) 
bonus = 10; 



Cette derniere ecrifure presente l'avantage de pouvoir contenir plusieurs lignes d' instructions 
entre les accolades, ce que ne permet pas la premiere syntaxe. Par ailleurs, il est egalement 
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tres frequent de rencontrer la syntaxe suivante, ou la premiere accolade est renvoyee a 
la ligne. 

if (scoreJoueur>200) 
{ 

bonus = 10; 
} 

Quelle que soit la syntaxe choisie, le mot-cle i f doit toujours etre ecrit en minuscule et le 
test place entre parentheses. Ce dernier peut prendre plusieurs formes, suivant ce qu'on 
cherche a evaluer. 

Une structure conditionnelle, telle que nous venons de l'ecrire, se traduit par la phrase 
suivante : si le resultat du test decrit entre parentheses est vrai, alors 1' instruction, ou le 
groupe d' instructions, qui suit est execute. Lorsque vous n'avez qu'une seule ligne 
d'instruction a executer si le resultat du test est vrai, vous pouvez la saisir directement 
derriere la parenthese qui ferme le test (comme dans le premier exemple) ; sinon vous 
devez decrire l'ensemble des instructions entres accolades (comme dans le deuxieme ou 
le troisieme exemple). 

Les differentes formes de test 

Avant de poursuivre la lecture de ce chapitre, il est important que vous compreniez le 
mecanisme d'un test. 

Un test est une valeur booleenne qui est soit vraie (true), soit fausse (false). C'est le 
resultat d'une comparaison, comme dans l'exemple precedent avec l'instruction score- 
Joueur>200, qui sera vraie si la valeur de la variable scoreJoueur est superieure a 200. Un 
test peut egalement etre simplement la valeur d'une variable booleenne, comme une 
propriete. 

Lors du codage, il faut s'assurer qu'un test renvoie toujours une valeur booleenne. Voici 
differents operateurs que vous pouvez utiliser dans un test. 

Les operateurs 

Dans la plupart des cas, vous aurez besoin de comparer des valeurs. Vous utiliserez alors 
des operateurs pour tester une superiorite (>), une inferiorite (<), une difference (!=) ou 
une egalite (==) entre deux valeurs. 



Remarque 

II existe egalement les operateurs <= et >= 



if (carte JoueurActif .x>250) carteJoueurActif .alpha=0.5; 
if(score<2000) bonus=0; 

if (motDePasse.text==250) carteJoueurActif .alpha=0. 5; 
if (reponse.text! = "Non" ) score = score +1; 
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Remarque 

Le test d'une egalite s'ecrit toujours avec deux signes egale : ==. Si vous n'en saisissez qu'un, il ne s'agit plus 
d'un test, mais d'une affectation. Le resultat du test sera alors tres different de ce a quoi vous vous attendiez. 



Si vous connaissiez les contextes d' execution des quatre lignes ci-dessus, vous pourriez 
aisement determiner si chaque test est vrai ou faux. 

Voici un test, portant sur une propriete, qui pourrait etre beaucoup plus concis, essayez de 
comprendre pourquoi. . . 

if (boutonAlerte.visible==true) acti vationSaisie=true; 

N'oubliez pas que la ligne d'instruction qui suit les parentheses sera executee lorsque le 
test renverra la valeur true. Comme la propriete boutonAlerte. visible est de type 
booleen, la comparaison avec la valeur true est inutile. II vous sufrit de saisir : 

i f ( boutonAl erte .visible) acti vat i onSai si e=true ; 

Une occurrence ne peut en effet qu'etre visible (visible==true) ou pas (visible==false). 

Voici un premier exemple qui permet d'appliquer un test dans un contexte precis. II s'agit 
d'une occurrence representant une balle qui se deplace de 5 pixels horizontalement et 
verticalement. Lorsqu'elle depasse certaines limites sur la scene (simulant le choc contre 
un mur), nous changeons alors la valeur de la variable qui definit le pas initial du depla- 
cement vertical ou horizontal. 

Fichier de reference : Chapitre9/ifl.fla 

var vitesseHorizontale = 5; 
var vitesseVerticale = 5; 

balle.addEvent Listener ( Event. ENTER_FRAME,deplacerBal le) ; 

function deplacerBal le (evt:Event) { 

bal le.x+=vitesseHorizontale; 
bal le.y+=vitesseVerticale; 

if (bal le.x>490) vitesseHorizontale = -3; 
if (bal le.x<10) vitesseHorizontale = 3; 
if(balle.y>267) vitesseVerticale = -3; 
if (balle. y<10) vitesseVerticale = 3; 

) 



Remarque 

Pour tester la position d'une occurrence sur la scene et notamment des depassements de zones, ne 
testez pas avec une egalite mais plutot avec les signes inferieurs ou superieurs. Si I'on souhaite par exem- 
ple faire I'action suivante : si la balle arrive a droite de la scene qui fait 490 pixels de largeur, on la replace 
a gauche ; un programmeur inexperimente aura tendance a ecrire if (balle. x==490) balle. x=0, 
alors qu'il faut imperativement ecrire if(balle.x>490) balle. x=0. En effet, un deplacement d'occur- 
rence ne se faisant pas toujours pixel par pixel, il y a un grand risque que votre occurrence ne passe pas 
precisement par le 490 e pixel du bord gauche de la scene si le pas de deplacement est de plus d'un pixel. 
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Effectuer plusieurs tests avec && et || 

Vous aurez parfois besoin d'effectuer plusieurs tests avant d'executer une ou plusieurs 
lignes d' instructions. Vous les combinerez alors entre les parentheses d'une structure 
conditionnelle en les separant par les paires de signes && et 1 1 . 

La double esperluette (&&) s'assure que les deux tests renvoient la valeur true alors que le 
double pipe (prononcez le mot « pipe » a l'anglaise) verifie qu'au moins un sur les deux 
renvoie la valeur true. 



Remarque 

Sur Mac, pour obtenir le caractere | , utilisez le raccourci Shift-Alt-L. 



Etudions tout de suite deux exemples qui illustrent ces propos : 

if (autorisationRelache && carteEnCours.x >450) inventaire++; 

Pour que la variable inventaire soit incrementee d'une unite, il faut que la valeur de la 
variable autori sati onRel ache ait pour valeur 1 (equivalent a true) et que l'occurrence inti- 
tulee carteEnCours soit situee a plus de 450 pixels du bord gauche de la scene. 

if (autorisationRelache || carteEnCours.x >450) inventaire++; 

Dans ce second exemple, il suffit que l'une des deux conditions que nous venons d'evoquer 
renvoie la valeur true. 



Definition 

Pour qualifier ces tests multiples, on parle de conditions inclusives et exclusives. 



Voici un autre exemple qui reprend et ameliore le script d'une balle qui rebondit sur 
les bords de la scene. Nous gerons maintenant les changements de valeur des variables 
vitesseHorizontale et vitesseVerticale en fonction d'une double condition. 

var vitesseHorizontale = 5; 
var vitesseVerticale = 5; 

balle. addEvent Listened Event. ENTER_FRAME,depl acerBal le) ; 

function deplacerBalle (evt:Event) { 

balle.x+=vitesseHorizontale; 
bal le.y+=vitesseVerticale; 

if(balle.x>490 || balle. x<10) vitesseHorizontale*=-l; 
if(balle.y>267 II balle. y<10) vitesseVerticale*=-l ; 
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Si l'occurrence en mouvement intitulee balle depasse l'une des 4 limites mentionnees 
(490, 10, 267 et 10), un changement de vitesse a lieu sur l'une des deux directions de 
deplacement. 

Pour conclure cette section, precisons que vous n'etes pas oblige de vous limiter a deux 
tests entre les parentheses de la structure conditionnelle ; vous pouvez en ajouter autant 
que vous le souhaitez. 

if(scoreJoueurl>250000 && scoreJoueur2>25000 && scoreJoueur3>25000) bonusEquipe=2000; 

if... else... 

Vous aurez besoin, dans certains cas, de prevoir 1' execution d'une ou plusieurs lignes 
d' instructions si le test renvoie la valeur fal se. Nous devons done adapter notre structure 
conditionnelle comme dans l'exemple suivant : 

if(test) { 

ligne d' instruction a executer si test est vrai ; 
} else { 

ligne d' instruction a executer si test est faux; 
} 

Comme vous pouvez le constater, nous avons simplement ajoute le mot-cle el se accom- 
pagne d'une ligne d' instruction placee entre accolades. Ainsi, lorsque le test renvoie la 
valeur false, e'est-a-dire lorsqu'il est faux, ces instructions seront executees. Dans 
l'exemple qui suit, lorsqu'une occurrence sera deplacee sur la scene par une technique de 
glisser-deposer, elle grossira de 200 % ou reviendra a son echelle d'origine (100 %) en 
fonction de la position ou elle sera deposee. 

Fichier de reference : Chapitre9/if2.fla 

balle.addEventListener(MouseEvent.MOUSE_DOWN,depl acerBal le) ; 
bal le.addEventl_istener(MouseEvent.MOUSEJJP,relacherBal le) ; 

function deplacerBal le(evt: Event) ( 

evt.currentTarget.startDrag( ) ; 
} 

function relacherBal le(evt: Event) ( 
stopDragt ) ; 
if (evt.currentTarget.x>250) ( 

evt.currentTarget.scaleX=2; 

evt.currentTarget.scaleY=2; 
} else { 

evt.currentTarget.scaleX=l ; 

evt.currentTarget.scaleY=l ; 
} 
} 

C'est grace a la structure conditionnelle qui contient un el se que nous pouvons realiser 
une telle action. 

Vous pouvez imbriquer plusieurs if : il suffit tout simplement d'ajouter un nouveau i f avec 
des parentheses et des accolades, si besoin est. Dans l'exemple qui suit, nous cherchons 
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a afficher sur la scene la position de 1' occurrence intitulee balle. Elle se trouve soit dans 
la partie haute de la scene, soit dans la partie basse. Dans ce dernier cas, elle peut se situer 
a gauche ou a droite ; nous utilisons done deux structures conditionnelles imbriquees pour 
tester sa position. 

if (balle. y<300) { 

messageBal le.text="Haut" ; 
} else { 
if (balle. x<400) { 

messageBal le.text="Bas Gauche" ; 
} else { 

messageBal le.text="Bas Droite" ; 
} 
} 

L'operateur ternaire 

II existe une autre syntaxe pour ecrire une structure conditionnelle de type if... else... Elle 
s'avere plus simple a utiliser et a rediger des lors que le principe de la structure condi- 
tionnelle est assimile. Cependant sa lecture est assez surprenante au premier abord. 



Operateurs unaires, binaires et ternaires 

Un operateur unaire ne possede qu'un seul operande, comme dans I'instruction -a, ou l'operateur - 
permet simplement de prendre I'oppose de a. Un operateur binaire utilise deux operandes, comme les 
operateurs = et +, qui utilisent necessairement deux constantes ou variables (a=6 ou b+c). L'operateur 
utilise ici est un operateur ternaire qui utilise trois operandes. 



Une structure conditionnelle ecrite avec l'operateur ternaire peut etre percue de la facon 
suivante : 



IVa 



leur a recuperer = test ? valeur a renvoyer si test est vrai : valeur a renvoyer 
si test est faux. 



Nous pourrions aussi la simplifier ainsi : 

Valeur = test ? valeur si vrai : valeur si faux; 

ou encore, si les valeurs a renvoyer sont true et fal se, par : 

Valeur = test ? true : false; 

Observez bien les signes typographiques de separation ? et : . lis separent simplement les 
deux valeurs a renvoyer. Si le test est vrai, la variable Val eur recoit la valeur placee apres 
le signe ? ; si le test est faux, elle regoit la valeur placee apres le signe : . 

Considerons la structure conditionnelle suivante : 

if (balle. x<400) { 

messageBal le.text="Bas Gauche" ; 
} else { 

messageBal le.text="Bas Droite" ; 
} 
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Elle peut etre ecrite a l'aide de l'operateur ternaire ainsi : 

messageBalle.text = balle.x<400 ? "Bas Gauche" : "Bas Droite"; 

Si cette syntaxe vous gene, vous pouvez egalement placer le test entre parentheses. 

messageBalle.text = (bal le.x<400) ? "Bas Gauche" : "Bas Droite"; 

En outre, vous pouvez effectuer un test avec plusieurs conditions inclusives ou exclusives. 
Pour conclure sur ce developpement, ajoutons que la valeur a recuperer n'est pas toujours 
de type String, comme c'est le cas dans l'exemple precedent ; vous pouvez faire appel a 
l'operateur ternaire dans de nombreux cas. 

Affectation d'une valeur a une variable : 

Iresultat = puce.x>250 ? 25 : 35; 
reduction = nombrePersonnes>=3? 25 : 15; 

Affectation d'une valeur a un texte dynamique : 

messageAccord.text = reponseCandidat.text=="Oui" ? "Bonne reponse" : "Mauvaise reponse"; 
Reglage d'une propriete : 

carte. rotation = carte.alpha<0.5? 45 : -45; 

Comparer deux chaines de caracteres 

La comparaison de chaines de caracteres est parfois delicate. Considerons l'exemple 
ci-dessous. 

if (reponseCandidat.text=="Oui " ) { 

messageAccord.text="Accord accepte" ; 
} else { 

messageAccord.text="Accord refuse" ; 
} 

A priori, ce script ne contient aucune erreur. Vous avez tout a fait raison, la syntaxe est 
bonne, et pourtant l'utilisateur risque de voir s'afficher Accord refuse sur la scene s'il 
tape oui ou OUI dans le texte de saisie reponseCandi dat. Observez bien la casse du texte sur 
la premiere ligne d'instruction : nous avons ecrit if (reponseCandidat.text=="Oui"), ce 
qui signifie que l'utilisateur doit tres precisement saisir sa reponse avec un majuscule et 
les lettres u et i en minuscules. Dans le cas contraire, le test renvoie la valeur f al se. Pour 
eviter ce probleme, ce qui revient a dire que nous ne voulons pas que le programme 
tienne compte de la casse de la reponse, vous devez effectuer la conversion suivante : 

if (reponseCandidat.text.toUpperCaset )=="0UI") { 

messageAccord.text="Accord accepte" ; 
} else { 

messageAccord.text="Accord refuse" ; 
} 
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Nous convertissons en majuscules la chaine de caracteres saisie par l'utilisateur afin de 
faire une comparaison avec le mot OUI (ecrit en majuscules). Ainsi, l'utilisateur peut 
saisir la reponse oui sous la forme qu'il souhaite, oui , Oui , OUI, Oul, etc. 

Pour conclure sur ce developpement, precisons que generalement, les methodes toUpper- 
Case( ) et toLowerCase( ) ne servent pas a realiser ce genre de tests, mais plutot a changer 
la mise en forme d'un texte. 



Effectuer un test avec switch() 

Pour ecrire une suite de structures conditionnelles, il existe l'instruction switch 0. Le 
principe consiste a effectuer un branchement sur un bloc d' instructions suivant une 
condition. 

Analysons ensemble la serie de tests ci-dessous avec les methodes if() et switchO : 

if (reponse. text=="David" ) { 

scoreEcran+=3; 

ecranSuivant=2; 
} 
if (reponse. text =="01ivier") { 

scoreEcran+=3; 

ecranSuivant=2; 
} 
if (reponse. text =="Fabienne" ) { 

ecranSuivant=3; 
} 
if (reponse. text=="Jerome" ) { 

scoreEcran+=4; 

ecranSuivant=3; 
} 

Et: 



switch (reponse. text) 
case "David" : 

scoreEcran+=3; 

ecranSuivant=2; 

break; 
case "Olivier" : 

scoreEcran+=3; 

ecranSuivant=2; 

break; 
case "Fabienne" : 

ecranSuivant=3; 

break; 
case "Jerome" : 

scoreEcran+=4; 

ecranSuivant=3; 
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Le code utilisant l'instruction switch ( ) ne semble pas etre plus long ou plus court, mais il 
est plus facile a comprendre (sans pour autant etre plus facile a ecrire !). 

Le premier avantage d'une telle syntaxe est d'optimiser le traitement d'une condition car 
tous les tests ne vont pas obligatoirement etre effectues. En effet, lorsque vous faites 
appel a l'instruction switch( ), l'instruction break permet d'interrompre la serie de tests si 
l'une des conditions est remplie. En revanche, dans le cas d'une serie d' instructions de 
type i f ( ), tous les tests sont effectues sans interruption, du premier, au dernier. 

Imaginons que l'utilisateur saisisse Olivier dans le texte de saisie intitule reponse.text. 
Dans ce cas, seules les deux premieres comparaisons vont etre effectuees et le break situe 
juste apres case "Olivier" : va interrompre le processus de test. Vous noterez que la 
derniere evaluation ne contient pas de break, car cela n'est pas necessaire. 

Avec une instruction i f ( ), nous pouvons pre voir le traitement a effectuer dans cas ou le 
test est faux. Si vous utilisez un swi tch ( ) , vous pouvez, de facon analogue, prevoir un cas 
par defaut avec l'instruction default, comme dans l'exemple suivant : 

switch (reponse.text) { 
case "David" : 

scoreEcran+=3; 

ecranSuivant=2; 

break; 
case "Olivier" : 

scoreEcran+=3; 

ecranSuivant=2; 

break; 
case "Fabienne" : 

ecranSuivant=3; 

break; 
case "Jerome" : 

scoreEcran+=4; 

ecranSuivant=3; 

break; 
default : 

ecranSuivant=7; 
} 

Pour ecrire un script avec un processus de verification faisant appel a l'instruction 
switchO, vous devez : 

1. Ecrire la structure qui englobe le processus. 

switchO { 



Saisie rapide 

Vous pouvez utiliser le raccourci clavier Esc+S+W. Rappelons que vous devez appuyer puis relacher la 
touche Esc puis faire de meme avec la touche S et enfin avec la touche W. 
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2. Saisir le test a evaluer entre les parentheses. 

Iswitch(reponse.text) { 

Vous ne devez pas specifier d' opera teurs de type ==, >, < ou encore !=, car la structure 
globale d'une instruction switchO sous-entend que vous testez differentes egalites. 
Ce sont les mots case qui vont faire office de signe =. 

3. Saisir les differents cas a evaluer. 

Icase "David" : 
scoreEcran+=3; 
ecranSuivant=2; 

Le mot case doit toujours etre saisi avec une minuscule et la ligne d'instruction doit 
se terminer par deux points. 

4. Pour terminer, n'oubliez pas l'instruction break pour interrompre le processus de 
verification. 

Ce type de test ne permet pas uniquement de tester la saisie d'un utilisateur. Examinons 
un dernier exemple qui e value la position d'une occurrence en mouvement. 

Fichier de reference : Chapitre9/switch2.fla 

var vitesseHorizontale = 5; 
var vitesseVerticale = 5; 

balle.addEvent Listener^ Event. ENTER_FRAME,deplacerBalle) ; 

function deplacerBalle (evt:Event) { 

balle.x+=vitesseHorizontale; 
bal le.y+=vitesseVerticale; 

switch (balle.x>=250) { 

case true : 

balle.alpha=0.3; 

break; 

case false : 
bal le.alpha=l ; 
break; 



if (bal le.x>490) vitesseHorizontale = -3; 
if (bal le.x<10) vitesseHorizontale = 3; 
if(balle.y>267 || balle.y<10) vitesseVerticale*=-l ; 
} 
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La balle, qui se deplace et rebondit sur les quatre cotes de la scene, devient plus ou moins 
transparente en fonction de sa position sur l'axe horizontal. 

La technique de test faisant appel a l'instruction swi tch ( ) ne peut et ne doit pas remplacer 
le if ( ) : elle est simplement plus adaptee dans certains cas. 
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Les iterations : boucles for() 



Lorsque vous programmerez une animation, vous vous apercevrez que certaines lignes 
d' instructions sont uniques, alors que d'autres doivent etre reproduites plusieurs fois. 
Prenons l'exemple d'une galerie de photos : il serait fasti dieux de devoir placer des 
images sur la scene a l'aide de glisser-deposer de symboles ou de copier-coller de lignes 
d' instructions. En programmation, il existe un mecanisme qui permet d'obtenir une iteration, 
c'est-a-dire une repetition d'actions : il s'agit des boucles for( ). Elles permettent d'eviter 
de nombreux copier-coller de lignes de code. Notons que la vitesse d'execution du code 
ainsi repete ne peut pas etre configuree. 




ActionScript s 



Figure 10-1 

Les neuf images ont ete placees sur la scene a l'aide d'une boucle for(). 



D*vIB TARDIYEAU 
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La boucle for() 



Pour obtenir le resultat de la copie d'ecran de la figure 10-1, il faudrait repeter plusieurs 
fois le groupe de lignes d' instructions ci-dessous en faisant varier les parametres 

imgl.jpg, 80 et 120. 

chargeur = new LoaderO; 
adresselmage.url = "images/imgl. jpg" ; 
chargeur.load(adresse Image) ; 
addChild(chargeur) ; 
chargeur. x=80; 
chargeur. y=120; 

Non seulement le code deviendrait tres long, augmentant ainsi considerablement la taille 
de votre script, mais copier neuf fois le meme code serait tres fastidieux, comme l'illustre 
l'extrait de script ci-dessous, dans lequel seuls quatre des neuf blocs de lignes necessaires 
sont presentes : 

chargeur = new LoaderO; 
adresselmage.url = "images/imgl. jpg" ; 
chargeur.load(adresse Image) ; 
addChild(chargeur) ; 
chargeur. x=120; 
chargeur. y=120; 

chargeur = new LoaderO; 
adresselmage.url = "images/img2. jpg" ; 
chargeur.load(adresse Image) ; 
addChild(chargeur) ; 
chargeur. x=80; 
chargeur. y=120; 

chargeur = new LoaderO; 
adresselmage.url = "images/img8. jpg" ; 
chargeur.load(adresse Image) ; 
addChild(chargeur) ; 
chargeur. x=120; 
chargeur. y=160; 

chargeur = new LoaderO; 
adresselmage.url = "images/img9. jpg" ; 
chargeur.load(adresse Image) ; 
addChild(chargeur) ; 
chargeur. x=160; 
chargeur. y=160; 

Vous retrouverez plus loin dans ce chapitre le script correspondant a ce fonctionnement 
avec une boucle for () (for6.fla). 

Avant de vous presenter de nombreux exemples, essayons de comprendre le fonctionnement 
et la structure d'une boucle for( ). 



Les iterations : boucles for() 

Chapitre 10 

1. Vous devez commencer par identifier les lignes d' instructions que vous souhaitez 
repeter et localiser les parametres qui vont devoir varier. II est generalement conseille 
d'ecrire une premiere fois le code que vous allez integrer dans une boucle for( ). En 
voici un exemple : 

caseTableau = new CaseOmbreet ) ; 
caseTableau.x = 90; 
caseTableau. y = 150; 
addChi Id (caseTableau) ; 



Remarque 

Les valeurs 90 et 150 sont celles que nous allons devoir changer a chaque iteration. 



2. Vous devez ensuite resoudre les problemes lies a la repetition. Dans cet exemple, nous 
souhaitons placer un meme symbole a differents endroits sur la scene ; il faut done 
calculer les ecarts entre chaque occurrence. Pour cela, nous effectuons 1' estimation 
suivante : nous positionnons, a l'aide de la souris, deux occurrences sur la scene, puis 
nous determinons l'ecart entre leurs deux bords gaudies ou leurs deux bords superieurs. 

3. Nous sommes fin prets a creer notre premiere boucle ; commencons par la structure 
globale. 

for() { 



Saisie rapide 

Vous pouvez utiliser le raccourci clavier Esc+F+R. Rappelons que vous devez appuyer puis relacher la 
touche Esc, faire de meme avec la touche F, puis appuyer sur la touche R. 



Nous allons saisir entre les parentheses, les informations necessaires a la repetition 
des quatre lignes d' instructions, qui seront placees entre les accolades. 

4. La repetition est basee sur l'utilisation d'un compteur, la variable doigt dans le code 
ci-dessous (comme si nous comptions sur les doigts de la main), dont nous allons 
preciser 3 parametres, separes par des points-virgules. 

for(var doigt:Number=l ; doigt<=5 ; doigt++ { 



Le premier concerne la declaration et 1' initialisation de la variable locale qui sert a 
compter le nombre de repetitions. Nous aurions pu commencer a compter a partir 
de 0, mais nous avons prefere debuter a 1 . Nous verrons plus loin dans ce chapitre 
qu'il est tres souvent necessaire d' initialiser cette variable a 0. 

Le deuxieme parametre definit la condition de la repetition. Tant que cette condition 
sera vraie, les instructions placees entre les accolades seront repetees. Dans cet exemple, 
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nous avons utilise l'operateur <=, mais nous aurions egalement pu employer < ou ! = 
(different de). Les instructions de placement du symbole sur la scene seront done 
repetees tant que la variable doigt aura une valeur inferieure ou egale a 5. Des que 
cette condition sera fausse, le lecteur Flash executera la premiere instruction situee 
apres les accolades. 

- Bien entendu, il faut modifier la valeur de la variable qui sert de compteur a chaque 
repetition. C'est l'objet du troisieme parametre qui definit le pas devolution du 
compteur. Nous aurions pu ecrire doigt+=2 si nous avions souhaite compter de 2 en 2 
ou bien doigt+=0.1 si nous voulions un pas tres petit. Tres souvent, on compte de 1 
en 1, et on ecrit alors l'instruction doigt = doigt+1 ou doigt++. Dans cet exemple, a 
chaque execution du bloc d' instructions delimite par les accolades, la variable doigt 
est augmentee de 1 : elle prendra done toutes les valeurs entieres de 1 a 5, ce qui 
donne bien cinq repetitions, ou cinq iterations. 

5. Nous devons completer le code par l'ecriture des lignes destructions a repeter en 
substituant la ou les valeurs qui doivent changer par la variable locale ou par un calcul 
base sur cette variable. 



Remarque 

Afin que notre script ne produise pas d'erreur, nous devons declarer la variable caseTabl eau a laquelle 
nous faisons reference pour placer le symbole CaseOmbree. 



Dans l'exemple que nous venons d'utiliser pour notre demonstration, nous avons simple - 
ment souhaite placer 4 fois le meme symbole sur la scene. Verticalement, ils se trouvent tous 
a la meme distance du haut de la scene (150 pixels), alors que, horizontalement, nous les 
decalons de 30 pixels. Dans la mesure ou le symbole mesure 60 pixels de largeur, nous 
obtenons un decalage de 90 pixels. Ainsi, lorsque la variable doi gt vaut 1, doi gt*90 a pour 
valeur 90 ; lorsque doigt vaut 2, doigt*90 donne 180, et ainsi de suite... Nous obtenons 
done bien un pas de 90 pixels. Retrouvez cet exemple dans le fichier f orl . f 1 a. 




Figure 10-2 

Resultat de V execution du script fori. fla 
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Voici le script complet : 

var caseTableau:CaseOmbree; 

for (var doigt=l; doigt <=4; doigt ++) { 

caseTableau = new CaseOmbree( ) ; 

caseTableau.x= doigt *90; 

caseTableau. y=150; 

addChild( caseTableau) ; 



Premier exemple 

Fichier de reference : fori . fl a 

CaseOmbree est le nom de la classe d'un symbole dans la bibliotheque. Pour vous aider 
a realiser ce premier exemple, voici la procedure initiale manquante, celle qui consiste a 
creer le symbole avec liaison. 

1. Tracez une forme sur la scene. 

2. Selectionnez-la. 

3. Pressez la touche de fonction F8. 

4. Precisez un point d'alignement, un nom de symbole et le type Clip. 

5. Cliquez sur le bouton Avance situe en bas a droite de la fenetre afin d'obtenir une 
palette plus grande. 



Identifiam : 
Classe 

Classe de base : 




r ~i 


CaseOmbree ) | v| |-/| 




flash.display.MovieCIrp '] \j/\ 


Liason 


Wl titportei' pour Action Script 




□ Exporter pour le partage il'e>t^eution 




M Exporter dans la prerniere image 


URL: 


[ ' Importer pour le partage a 1'execution 





Figure 10-3 

Vous devez definir un nom de classe pour pouvoir placer un symbole dynamiquement sur la scene. 



6. Cochez la case Exporter pour ActionScript et donnez un nom de classe qui ne 
contient ni espace, ni caracteres speciaux ou accentues. Par convention, utilisez une 
majuscule en debut de mot. 

7. Validez. 

Vous pouvez a present placer le script que nous venons d'examiner dans une classe ou 
dans la fenetre Actions. 
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Pourquoi initialiser une variable a ? 

Dans la mesure ou nous avons generalement besoin de stocker des informations sous 
forme de listes pour pouvoir les exploiter a travers une iteration, nous utilisons les sche- 
mas XML ou les tableaux. Or, le premier noeud d'un schema XML et le premier element 
d'un tableau portent l'index 0. Dans une boucle for(), il faudra done utiliser une variable 
qui debute a pour se referer a ces deux elements : la variable compteur aura alors pour 
valeur initiale. 



Exemples 



Dans la mesure ou la technique des boucles for( ) est difficile a comprendre et a manipuler 
pour la premiere fois, nous allons aborder une serie d'exemples vous demontrant ainsi la 
diversite des cas. 

Exemple 1 

Fichier de reference : f or-2 . f 1 a 

Ann que vous vous concentriez sur la structure de la boucle for( ), ce premier exemple ne 
fait rien en particulier sur la scene ; il utilise uniquement la fonction trace( ). 

|for(vari=0;i<=10;i++) { 
traced' ); 

Essayez simplement de substituer le contenu de notre fonction trace () par les lignes 
d' instructions ci-dessous. Faites varier egalement les valeurs et 10 pour verifier a 
chaque fois le resultat avec le raccourci Ctrl-Entree (Windows) ou Commande -Entree (Mac). 

Concatenation : traceCJoueur "+i); 

Calcul : trace(i*10); 

Un chiffre aleatoire : trace(Math.random()*100); 

Chiffre aleatoire arrondi : t race (Math, round ( Mat h.random( )*100)) ; 

Lire l'entree d'un tableau : trace(artiste[i]); 

Exemple 2 

Fichier de reference : f or3 . f 1 a 

Ce deuxieme exemple est une application que vous rencontrerez souvent et qui consiste a 
exploiter un tableau et a creer un texte dynamiquement sur la scene. 

var prenoms: Array = new ArrayC'Marine" , "Luna" , "David" , "01 ivier" , "Marjorie") ; 

var caseTableau:TextField; 

for (var i=0; i<=4; i++) { 
caseTableau = new TextFieldO; 
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caseTableau.text = prenoms[i ] ; 
caseTableau.x=i*90; 
caseTableau.y=150; 
addChild(caseTableau) ; 
} 

Nous commencons par declarer une instance de la classe TextFieldO et une autre de la 
classe Array( ), que nous initialisons. 

Nous effectuons ensuite une boucle f or( ) pour parcourir le tableau prenoms. 



Remarque 

Pour decaler I'ensemble des textes du bord gauche de la scene, il faudrait adapter la ligne d'instruction 
faisant reference a la propriete x de lafagon suivante : caseTableau.x=50+(i*90). 



Exemple 3 

Fichier de reference : f or4 . f 1 a 

L' exemple ci-dessous illustre simplement que le pas de la repetition n'est pas systemati- 
quement un entier superieur ou egal a 1 . Consultez en particulier le chapitre 5 consacre 
aux mouvements sur la scene : l'un des exemples traite des cosinus et sinus, aspect non 
detaille ici. 

var puce:Puce; 

var pas:Number = 0; 

for (var i=0; i<=6.2; i+=0.1) { 

puce = new Puce( ) ; 

addChild(puce) ; 

puce. x=250+Math. cos ( pas )*100; 

puce.y=150+Math.sin(pas)*100; 

pas+=0.1; 

} 

Exemple 4 

Fichier de reference : f or 5 . f 1 a 

Le script que nous allons aborder ci-dessous correspond a 1' animation dont la copie 
d'ecran est presentee sur la figure 10-1. La problematique du chargement d'image est 
recurrente en developpement ; c'est pourquoi nous avons souhaite vous en presenter un 
exemple. 

Fichier de reference : f or6 . f 1 a 

var accrocheX=100; 
var accrocheY=40; 

var chargeur; 

var adresselmage = new URLRequest( ) ; 
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for (var 1=1 j i<=9; i++) { 
chargeur = new LoaderO; 
adresselmage.url = "images/img"+i+" . jpg" ; 
cha rgeur. load (ad res se Image) ; 
addChild(chargeur) ; 
cha rgeur. x=accrocheX; 
cha rgeur. y=accrocheY; 

accrocheX+=70; 

if (accrocheX>300) { 

accrocheX = 100; 

accrocheY+= 70; 
} 
} 

Exemple 5 

Ce dernier exemple est interessant car il presente de nombreuses notions mises en oeuvre 
dans une boucle f or( ). Sans cette derniere, chaque piece de notre puzzle devrait subir un 
traitement a part. En conclusion, plus les lignes d' instructions a repeter sont nombreuses, 
plus la boucle fort ) joue un role indispensable. 

Fichier de reference : f ortween . f 1 a 

import fl .transitions. easing.*; 
import fl .transitions .*; 

var accrocheX=100; 
var accrocheY=40; 

var mouvement:Tween; 

var chargeur: Loader; 

var cadreChargeur:Sprite; 

var adresselmage = new URLRequest( ) ; 

for (var 1=1; i<=9; i++) { 
cadreChargeur = new SpriteO; 
chargeur = new LoaderO; 

adresselmage.url = "piecespuzzle/case"+i+" . jpg" ; 
cha rgeur. load (adresselmage) ; 
cadreChargeur.x=accrocheX+35; 
cadreChargeur.y=accrocheY+35; 
addChild(cadreCha rgeur) ; 
cadreCha rgeur. addChild( chargeur) ; 
chargeur. x=-35; 
chargeur. y=-35; 

cadreCha rgeur. rotation=360-( Math. round ( Ma th. randomt )*4))*90; 
cadreChargeur. blendMode = BlendMode. MULTIPLY; 

accrocheX+=70; 

if (accrocheX>300) { 

accrocheX = 100; 

accrocheY+= 70; 
} 
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cadreChargeur. add Event Listener (Mouse Event. MOUSE_DOWN,tournerOccurrence) ; 
function tournerOccurrence(evt:MouseEvent) { 

var sens = (evt.shiftKey ? 90 : -90); 

var angleDepart:Number = evt.currentTarget. rotation; 

if (mouvement == nul 1 ) { 

mouvement = new Tween(evt.currentTarget ."rotation" .Regul ar.easeln.angleDepart, 

^-angleDepart+sens, 0.5, true) ; 
} else if ( ! mouvement. isPlaying) { 

mouvement = new Tween(evt.currentTarget ."rotation" , Regul ar.easeln.angleDepart, 

angleDepart+sens ,0.5, true) ; 



La boucle for each() 



Avant d'aborder ce type de boucle, vous devez bien connaitre le mecanisme et la logique 
d'une boucle for(). 

La boucle for each( ) est une variante de la boucle f or( ), mais le principe reste le meme : 
repeter une action. Ce type de boucle est particulierement adapte a la manipulation des 
tableaux, des arborescences XML et des objets pour recuperer des valeurs de proprietes. 
La difference avec une boucle for( ) porte sur les arguments places entre parentheses. 

for each (var nomduneVariable:Type in Instance d'un objet) { 

) 

Plutot que de vous expliquer theoriquement la nature et le role des arguments, examinons 
l'exemple suivant. Nous allons creer un tableau et ecrire une iteration sur ses elements, 
mais agir comme si nous ne connaissions pas le nombre d' elements qu'il contient. Pour 
cela, nous allons simplement utiliser une boucle for each( ). 

var semaine:Array = new Array( "Lundi " ."Mardi " ."Mercredi " , "Jeudi " , "Vendredi " , 
*»"Samedi " , "Dimanche" ) ; 

for each (var jour:String in semaine) { 

tracet jour) ; 
} 

Avec ce simple exemple, nous comprenons mieux le role des deux parametres de 
l'instruction for eachO. La variable jour sert a stacker, l'une apres l'autre, toutes les 
valeurs d'un objet, d'un tableau ou d'une instance XML. 

Le parametre semaine correspond au nom du tableau, de l'instance XML ou de l'objet a 
parcourir. C'est le mot-cle in qui permet d'etablir la liaison entre les deux. On parle alors 
de parcours d'une collection. 

Un probleme se pose tout de meme ! Vous avez remarque que nous devions typer la 
variable jour. Mais quel type faudrait-il utiliser si les valeurs de la collection a parcourir 
etaient de types differents ? Vous n'auriez pas d' autre choix que d' utiliser le type * et 
ecrire : var jour:* in semaine. 
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Exemple 1 



Dans cet exemple, nous n'allons pas parcourir un tableau, mais un objet (que nous pour- 
rions tout de meme appeler tableau associatif ou tableau de proprietes). 



Remarque 

contenant et contenu sont des textes dynamiques qui ont ete places sur la scene. 



Fichier de reference : foreachinl.fi a 

var heure:Object = {heure:"De manger" ,minutes:25,secondes:13} ; 

contenant. text="" ; 
contenu. text="" ; 

for each (var laValeur:* in heure) { 

contenant. appendText(laValeur+"\n") ; 
} 

Avant d'analyser ce script, rappelons qu'un objet possede des proprietes auxquelles on 
associe des valeurs sous la forme nomPropri ete: valeur et non nomPropri ete=valeur. Le 
nom de la propriete ne doit pas etre saisi entre guillemets contrairement a sa valeur (s'il 
s'agit d'un texte). Une valeur de type nombre ne doit pas etre ecrite entre guillemets. 

Dans l'exemple ci-dessus, grace a la boucle for eachO, nous ne cherchons pas a savoir 
combien de proprietes contient l'objet heure, ce que nous ferions dans le cas d'une boucle 
fort ). Nous utilisons la syntaxe var laValeur:* in heure. La variable laValeur va prendre 
successivement les valeurs De manger, 25 et 13. Si vous etes habitue aux boucles for() 
classiques, cette technique surprend un peu, mais elle s'avere tres vite incontournable 
pour un tel traitement. 

Exemple 2 

Fichiers dereference : foreachin2.fla, main. as et Nuage.as 



Remarque 

Consultez eventuellement le chapitre 16 dedie a la creation de classes personnalisees pour comprendre 
le mecanisme d'une classe rattachee a un symbole. 



Dans cet exemple, nous allons demontrer qu'il est possible de lire les proprietes definies 
dynamiquement pour une occurrence. 

Notre premier fichier f oreachi n2 . f 1 a ne contient aucun script : seule la classe du document 
a ete precisee en bas a droite de la palette Proprietes. 

Nous avons egalement cree un symbole dont la liaison nous a permis de definir sa classe, 
comme nous l'avons presente dans la figure 10-3. Nous l'avons intitulee Nuage. 
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Voici le script de cette classe. 

package { 

import fl ash. display. Sprite; 

dynamic public class Nuage extends Sprite { 

function Nuage(placeX,placeY,echel le, transparence) { 

x=pl aceX; 
y=pl aceY; 
scaleX=echel le; 
scaleY=echel le; 
alpha=transparence; 

} 
} 
} 

Un code extremement simple ! Nous avons simplement cree 5 proprietes dont les valeurs 
vont etre definies dans la classe main (la classe du document) au moment de l'instanciation 
de la classe NuageO. 

package { 

import fl ash. display. Sprite; 

public class main extends Sprite { 

public var nuagel:Nuage; 

function main( ) { 

nuagel = new Nuaget 150, 120 ,0 .3,0. 5) ; 

nuagel.temps="Mauvais" ; 

nuagel. vitesseVent=3; 

nuagel. charge El ectrique=230000; 

addChild(nuagel) ; 

for each (var laValeur:String in nuagel) { 

trace(laValeur); 
} 

for (var nomPropriete:String in nuagel) { 
trace(nomPropriete) ; 



} 
} 
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Le resultat de l'execution de l'animation est le suivant : 

230000 

Mauvais 

3 

chargeElectrique 

temps 

vitesseVent 

Nous declarons une variable nominee nuagel pour pouvoir instancier la classe Nuage( ). 

Nous deflnissons ensuite les proprietes que nous allons pouvoir lire a l'aide de la boucle 
for each( ). Nous vous rappelons que ces proprietes peuvent etre ajoutees car la classe 
Nuage( ) a ete declaree comme dynamic. 

Lorsque nous cherchons ensuite a saisir le code de la boucle for eachO, nous faisons 
reference a l'instance nuagel. Nous obtenons alors les valeurs des proprietes que nous 
avons definies. 



La boucle for (in) 

Avant d'aborder ce type de boucle, vous devez bien connaitre le mecanisme et la logique 
d'une boucle for(). 

Contrairement a la boucle for each , une boucle for ( i n ) ne permet pas de lire les valeurs 
des proprietes d'une instance mais plutot ses proprietes. La structure est exactement la 
meme, seuls le resultat ainsi que la syntaxe different. 

Fichier de reference : foreachinl.fi a 

var heure:0bject = {heure:"De manger" ,minutes:25,secondes:13} ; 

contenant.text="" ; 
contenu.text="" ; 

for each (var laValeur:* in heure) { 

con tenant. a ppendText(laValeur+"\n") ; 
} 

for (var nomPropriete:String in heure) { 
contenu.appendText(nomPropriete+"\n") ; 
} 

Vous noterez que le mot-cle each a bien ete retire et que le resultat est bien different de 
celui produit par une boucle for eachO. 
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Conclusion 



La construction dynamique d'une interface passe generalement par des appels a des 
fichiers XML, des manipulations d'objets, des parcours de tableaux, des chargements 
multiples de medias et des placements dynamiques de symboles et de textes sur la scene : 
vous ne pourrez done jamais vous dispenser d'utiliser des boucles ! 

II est vrai que la manipulation des boucles constitue, pour les neophytes en programmation, 
un premier obstacle : cette logique d'ecriture de code est relativement abstraite. Nous 
vous conseillons done, lors de vos premieres realisations, de volontairement copier-coller 
les lignes de code assurant la meme fonction afin de prendre conscience de la necessite 
des boucles for(), for eachOetfor (in), mais egalement de determiner facilement les 
portions de code a repeter. 
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Les fonctions 



La notion de fonctions est une notion elementaire en algorithmique. Elle est indispen- 
sable en progr animation, notamment en ActionScript 3 pour le systeme de gestion des 
evenements. 

II en existe trois types : 

• Les fonctions simples. 

• Les fonctions avec parametres. 

• Les fonctions de rappel (qui fonctionnent avec les gestionnaires d'evenements). 

Une fonction est comparable a une macrocommande, un raccourci, une recette, c'est-a- 
dire une technique qui consiste a representer ou appeler un ensemble d' actions par un ou 
quelques mots. 

Prenons l'exemple suivant : une personne (un professeur) pourrait convenir avec d'autres 
(des etudiants) des conditions d' expressions suivantes : 

• Myriam, lorsque je prononcerai ton prenom, tu te leveras de ta chaise, tu avanceras 
jusqu'a l'interrupteur, tu appuieras sur le bouton de la lumiere de la salle et tu reviendras 
t'asseoir a ta place. 

• Adrien, lorsque je prononcerai ton prenom, tu te leveras de ta chaise, tu te tourneras 
face a la classe et tu diras : il est l'heure de la pause. 

Le professeur vient de donner des instructions a deux etudiants qui savent maintenant ce 
qu'ils doivent faire lorsqu'ils entendent leur prenom. Imaginons, a present, qu'au bout de 
5 minutes de parole, l'enseignant dise : « et voila comment regler ce probleme. Adrien. » 
A la suite de ce mot que vient de prononcer le professeur, une serie d' actions va se derouler : 
Adrien va se lever, il va se tourner vers la classe et dire « II est l'heure de la pause ». 
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Grace a cette technique, non seulement le professeur n'a pas besoin de repeter ce qu'il 
avait appris a Adrien, mais de plus, au prochain cours (avec le meme public), il pourra 
dire a nouveau « Adrien » car ce dernier sait desormais ce qu'il doit faire. II pourra, de la 
meme facon, prononcer « Myriam » en entrant dans la salle ! 

Si vous avez compris qu'en prononcant un mot, on peut demander a une personne d'executer 
des instructions, voyons comment adapter ce systeme en programmation. La technique 
est extremement simple ! Vous allez commencer par initialiser votre fonction avant 
de l'appeler. 

La fonction simple 

Definition 

Commencez par initialiser une fonction en ecrivant la structure globale suivante : 

function () { 

} 

Nous attirons tout de suite votre attention sur l'orthographe du mot function : il contient 
un u et non un o, cela est une source d'erreurs assez frequente. . . 

Vous devez definir un nom de fonction au meme titre que nous avons defini dans les 
exemples precedents les noms Adrien et Myriam. 

function placerTexte( ) { 

} 

Terminez la procedure en saisissant des lignes d' instructions a executer de facon analogue 
aux instructions qu'a donnees le professeur dans l'exemple precedent. 

function placerTexte( ) { 

var messagePersonnel :TextField = new TextFieldO; 

messagePersonnel .text = "Bonjour le monde !"; 

addChi Id (messagePersonnel ) ; 
} 

Vous avez a present termine 1' initialisation de votre fonction ; nous allons pouvoir maintenant 
l'appeler dans un programme. 

Appel d'une fonction 

Comme vous l'avez peut-etre deja devine, nous allons utiliser le nom pi acerTexte pour faire 
reference aux trois lignes d' instructions de la fonction, mais en y ajoutant des parentheses. 
Vous etudierez dans la section suivante le role de ces parentheses. 

| placerTexte( ) ; 

L' execution de cette instruction provoque l'affichage sur la scene de l'expression « Bonjour 
le monde ! ». Elle n'est pour l'instant ni positionnee, ni formatee, mais l'objectif etait 
simplement d'illustrer l'execution de lignes d' instructions a partir d'un simple nom. 
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La fonction avec parametres 

L' initialisation et l'appel d'une fonction sont deux techniques tres simples, mais elles 
presentent pour 1' instant principalement deux limites majeures avec cette syntaxe. 

• Le texte est toujours le meme. 

• Sa position est toujours la meme. 

Pour pallier ce probleme, vous allez devoir creer une fonction avec parametres qui se carac- 
terise par l'ajout, entre les parentheses, des noms que nous devons qualifier de variables. lis 
vont porter les valeurs que nous aurons precisees au moment de l'appel de la fonction. Ces 
variables seront egalement utilisees dans les lignes d' instructions qui se trouvent a l'interieur 
de la fonction, et seront remplacees par leurs valeurs respectives au moment de l'appel. 

La fonction avec parametres differe de la fonction simple (sans parametre) a deux niveaux : 

• Au moment de 1' initialisation de la fonction, nous devons prevoir des variables locales. 

• Au moment de l'appel de la fonction, nous devons definir (renseigner) ces variables. 

En reprenant notre exemple initial, imaginons que nous souhaitions ecrire un texte 
personnalise et le placer a un endroit precis de la scene. Voila comment nous devons 
adapter le code : 

function pi acerTexte(texteDuMessage:String,positionX:Number, positionY: Number ) { 

var messagePersonnel :TextField = new TextField( ) ; 

messagePersonnel .text = texteDuMessage; 

addChi Id (messagePersonnel ) ; 

messagePersonnel .x=positionX; 

messagePersonnel .y=positionY; 
} 

placerTexte("1850",160,150) 
placerTexte("1900",200.150) 
placerTexte("1950",240,150) 
pi acerTexte( "2000" ,280.150) 

L'ordre dans lequel sont definis les parametres doit etre respecte lors de l'appel de la 
fonction. En revanche, dans les lignes d' instructions contenues entre les accolades, ces 
parametres peuvent etre presents, eventuellement a plusieurs reprises, a n'importe quel 
endroit. Au moment de l'appel de la fonction, nous devons done fournir la valeur de 
chaque parametre ; sans cela, une erreur se produit. Avec cette technique, nous avons 
evite de copier-coller plusieurs lignes de code ! 

La fonction de rappel 

Les fonctions de rappel ont ete abordees dans le chapitre 3 : La gestion des evenements. 
Une fonction de rappel n'est ni plus ni moins qu'une fonction telle que celles que nous 
venons de presenter depuis le debut de ce chapitre. Cependant, elle presente la particula- 
rity de contenir en parametre un nom d'objet, accompagne de son type, pour recevoir des 
informations envoyees par l'ecouteur qui l'invoque (qui l'appelle). 
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Prenons cet exemple : 

I function masquerEtoile(evt:MouseEvent) { 
etoileBlanche.visible=false; 

Cette fonction ressemble a celles que nous venons d'etudier precedemment avec un para- 
metre, mais elle ne va pas etre appelee comme nous l'avons vu. Elle sera invoquee par un 
ecouteur. 

etoile. add EventListener(MouseEvent.MOUSE_DOWN,masquerEtoile) ; 

Vous remarquez que l'appel ne contient pas de parentheses : il est done impossible de 
passer simplement des parametres a cette fonction. Voici tout de meme une technique. 

Utiliser des parametres avec une fonction de rappel 

La technique que nous allons aborder n'est pas conforme aux regies de programmation 
en AS3, mais elle constitue une solution au probleme pose et respecte les regies de la 
programmation orientee objet. 

Comme nous n'avons pas le droit d'ecrire : 

| etoile. add Event Li stener(MouseEvent.MOUSE_DOWN, masquer Etoile.nominstance) ; 

nous devons trouver une solution pour pouvoir personnaliser 1' execution de la fonction 
selon 1' occurrence cliquee. 

Vous travaillerez generalement avec des tableaux ou des fichiers XML, dont vous allez 
avoir besoin afin de recuperer un numero d' index propre a une occurrence. Voici un 
exemple qui montre comment obtenir cet index sans utiliser une boucle fort ). 

1 . Commencez par attribuer un numero unique a chaque occurrence a partir desquelles 
une action differente devra etre realisee. 

Ietoilel.sonNumero=l; 
etoile2.sonNumero=2; 

2. Dans la fonction de rappel, vous allez utiliser la propriete currentTarget pour pouvoir 
faire reference a la propriete sonNumero. 

I function masquerEtoile(evt:MouseEvent) { 
t race (evt. currentTarget. sonNumero) ; 

3. Ajoutez des ecouteurs aux occurrences sur lesquelles vous souhaitez que l'utilisateur 
interagisse (clic, survol, etc.). 

etoil el. addEvent Listener (Mouse Event. M0USE_D0WN, masquer Etoile) ; 
etoi le2.addEvent Listener (Mouse Event. M0USE_D0WN, masquer Etoile) ; 

Voila ce qui se passe precisement lorsque l'utilisateur clique sur une occurrence. 
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Cette derniere possede des proprietes, qui vont etre envoyees a l'objet que vous avez 
indique en parametre de la fonction de rappel, au moment de la constatation de l'evene- 
ment. Pour y acceder a partir des lignes d' instructions qu'elle contient, vous devez done 
faire reference a ce meme mot (le nom de l'objet) et aux proprietes disponibles. Celle qui 
s'intitule currentTarget permet de faire reference a l'occurrence cliquee. 

Deux autres solutions sont egalement envisageables : 

• Utiliser l'instruction swi tch ( ) pour executer des lignes d' instructions differentes. 

• Traiter le nom de l'occurrence pour extraire un suffixe sous forme de numero, ce qui 
permet d'eviter de definir une propriete pour chaque occurrence. 
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Le chargement de medias sous 
forme de f ichiers externes 



En matiere de multimedia, ce chapitre est surement le plus important car il traite des 
techniques et problemes de chargement de fichiers externes de types texte, son, image et 
video. Le sujet de cet ouvrage etant le langage ActionScript 3, il serait impensable que 
nous vous fassions importer les medias a partir du menu Fichier de TIDE de Flash. Nous 
allons done gerer le chargement et le controle des medias a partir de lignes d'instructions, 
ce qui presente les avantages suivants : 

• L' aspect dynamique est pris en consideration. 

• Le poids des fichiers SWF s'en trouve allege. 

• La mise a jour des SWF est facilitee. 

• Certaines manipulations ne peuvent etre realisees qu'en ActionScript. 

Sans compter le plaisir eprouve a gerer des lignes d'instructions ! 

Avant de vous lancer dans la realisation de gros projets contenant des medias textes, 
images et videos, nous vous conseillons de lire le chapitre 2, si vous ne l'avez pas deja 
fait. Cela vous permettra de mieux controler le chargement, le positionnement et le 
dechargement de vos medias. 

Charger une image sur la scene 

Pour charger une image sur la scene, nous allons devoir faire appel a deux classes distinctes : 

• Laclasse LoaderO. 

• Laclasse URLRequestO. 
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Cette derniere va servir a generer une instance dont le role est d'encapsuler l'adresse de 
stockage de l'image, alors que la premiere va creer une instance servant de conteneur a 
1' image chargee sur la scene. 

Fichier de reference : Chapitrel2/Chargerlmage.fla 

1. Commencer par creer deux instances des classes que nous venons d'evoquer. 

Ivar chargeur: Loader = new LoaderO; 
var adresseImage:URLRequest = new URLRequestC'imagel. jpg") ; 

Si vous connaissez deja l'adresse de l'image, comme dans cet exemple, precisez-la 
des le depart. Dans le cas contraire, il faudra la preciser a l'aide de la propriete url . 

2. Chargez l'image dans le conteneur et ajoutez 1' objet d'affichage a la liste d'affichage. 

Ichargeur.load(adresselmage) ; 
addChild(chargeur) ; 

3. Terminez la manipulation en placant votre image (son coin superieur gauche) a 
l'endroit desire sur la scene. 



chargeur. x= 
chargeur. y= 



100; 
50; 



Vous devriez obtenir le script suivant : 

var chargeur: Loader = new LoaderO; 

var adresseImage:URLRequest = new URLRequestC'imagel .jpg") ; 

chargeur.load(adresse Image) ; 

addChild(chargeur) ; 

chargeur. x=100; 
chargeur. y=50; 

Certains developpeurs preferent instancier directement la classe URLRequest( ) en parametre 
de la methode 1 oad( ) de la classe LoaderO ; cela n'est pas une obligation. Cette technique 
presente 1' inconvenient de rendre le code moins accessible ou tout du moins plus difficile 
a lire. 

var chargeur: Loader = new LoaderO; 
chargeur. load (new URLRequest( "imagel. jpg")) ; 
addChild(chargeur) ; 

chargeur. x=100; 
chargeur. y=50; 

Cette technique peut paraitre complexe a celles et ceux qui avaient l'habitude de charger 
des images en AS2 avec un simple loadMovieO ou loadMovieNumO. En revanche, vous 
allez decouvrir que la gestion du chargement est plus simple. De plus, l'ajout d'un evene- 
ment de type MouseEvent est plus facile a gerer. Souvenez-vous : il fallait attendre la fin du 
chargement de l'image avant de pouvoir lui affecter un gestionnaire d'evenement, ce qui 
n'est plus le cas aujourd'hui. Enfin, cette technique ne devrait pas sembler trap complexe 
a celles et ceux qui utilisaient un MovieCl ipLoader( ), a l'exception de l'instanciation de la 
classe URLRequestO. 
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Rendre une image cliquable 

Vous aurez parfois besoin de rendre cliquable une image chargee sur la scene. Pour cela, 
il suffira de creer un ecouteur (ajouter un gestionnaire d'evenement). 

chargeur.addEvent Listener (Mouse Event. M0USE_DOWN,cl i c Image ) ; 

function cl icImage(evt:MouseEvent) { 

chargeur.blendMode = BlendMode. MULTIPLY; 
} 

En reprenant notre script initial, vous devriez obtenir le code suivant : 

Fichier de reference : Chapitrel2/Chargerlmage2.fla 

var chargeur: Loader = new LoaderO; 

var adresseImage:URLRequest = new URLRequestCimagel.jpg"); 

chargeur.load(adresse Image) ; 

addChild(chargeur) ; 

chargeur. x=100; 
chargeur. y=50; 

chargeur.addEvent Listener (Mouse Event. M0USE_DOWN,cl i c Image ) ; 
chargeur.addEvent Listener (Mouse Event. MOUSEJP.relacherCl ic Image) ; 

function cl iclmagetevt :MouseEvent) { 

chargeur.blendMode = BlendMode. MULTIPLY; 
} 

function relacherCl icImage(evt:MouseEvent) { 

chargeur.blendMode = BlendMode. NORMAL; 
} 



Point d'alignement d'une image 

Le point d'alignement d'une image chargee sur la scene se trouve toujours en haut a 
gauche. Vous le constateriez aisement si vous cherchiez a faire tourner une occurrence, la 
rotation s'effectuant alors autour de ce point. Cela est egalement vrai lors de la mise a 
l'echelle d'une image. 

Comme nous l'evoquions au debut de ce chapitre, il sera bien souvent necessaire de charger 
les medias dans des conteneurs d'objets d'affichage. C'est ce qui permet de resoudre ce 
probleme, comme nous allons le voir dans cet exemple. 

Fichier de reference : Chapitrel2/Chargerlmage3.fla 

1. Commencons par creer une instance de la classe Sprite( ) que nous ajoutons a la liste 
d'affichage et que nous placons sur la scene. 

var cadre:Sprite = new SpriteO; 
addChild(cadre); 
cadre. x=250; 
cadre. y=150; 
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2. Nous effectuons ensuite le chargement de l'image comme precedemment, mais nous 
allons ajouter l'instance de la classe Load( ) dans l'instance de la classe Sprite( ) tout 
juste creee. 

var chargeur: Loader = new LoaderO; 

var adresseImage:URLRequest = new URLRequestC'imagel . jpg") ; 

chargeur.load(adresse Image) ; 

cadre.addChild(chargeur) ; 

Pour l'instant, l'image est chargee et son coin superieur gauche est aligne sur le centre de 
l'instance de type Sprite( ). Nous devons done decaler l'image vers la gauche et vers le 
haut. Comme nous connaissons les dimensions de l'image, nous les utilisons directement 
dans le code, mais il serait preferable de lire les valeurs renvoyees par les proprietes wi dth 
et hei ght. II faut pour cela que vous utilisiez un gestionnaire d'evenement que nous allons 
decouvrir dans le prochain developpement, Gerer la fin du chargement d'une image. 

chargeur. x=-105; 
chargeur. y=- 105 ; 

Ajoutez ces quelques lignes d' instructions et constatez que la rotation s'effectue correc- 
tement autour du centre de l'image. 

cadre.addEventl_istener(MouseEvent .M0USE_D0WN,cl ic Image) ; 

function cl icImage(evt:MouseEvent) { 

cadre. rotation+=10; 
} 



Animation de prechargement 

Vous devrez probablement informer l'utilisateur de votre programme qu'une image est 
en cours de chargement. Pour cela, vous allez devoir utiliser un gestionnaire faisant appel 
a l'evenement PROGRESS de la classe d'evenement ProgressEvent. 

Fichier de reference : Chapitrel2/Chargerlmage4.fla 

Commencons notre script en chargeant l'image comme nous l'avons effectue dans les 
pages precedentes : 

var chargeur: Loader = new LoaderO; 

var adresseImage:URLRequest = new URLRequestC'imagel. jpg") ; 

chargeur.load(adresse Image) ; 

addChild(chargeur) ; 

chargeur. x=140; 
chargeur. y=30; 

Nous ajoutons ensuite un gestionnaire d'evenement, mais observez bien la ligne d'instruction 
ci-dessous : nous faisons d'abord reference a la propriete contentLoaderlnfo. Nous 
n'associons pas directement la fonction addEventListener( ) a notre instance chargeur. 
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chargeur. content Loader Info.addEvent Listener (Progress Event. PROGRESS, chargement EnCours) ; 

function chargementEnCours(evt:ProgressEvent) { 

jauge.scaleX=evt .cur rentTarget. bytes Loaded/evt. cur rentTarget. bytesTotal ; 
} 

L'ecouteur mentionne la fonction de rappel chargementEnCours qui contient l'animation. 
C'est done cette ligne d'instruction que vous devez changer si vous souhaitez realiser une 
autre animation. 



Gerer la fin du chargement d'une image 

Fichier de reference : Chapitrel2/Chargerlmage4.fla 

Si ce n'est deja fait, prenez connaissance du developpement precedent, Animation de 
prechargement, avant de poursuivre votre lecture. 

La gestion de la fin du chargement d'une image fonctionne de la meme facon que son 
prechargement : vous devez utiliser un ecouteur, mais pas avec la meme classe. 

cha rgeur. con tent Loader Info. add Event Listener (Event .COMPLETE, chargementTermine) ; 



function chargementTerminetevt: Event) { 

jauge. visible =false; 
} 

Dans la section Point d'alignement d'une image, nous avons evoque la possibility de 
determiner les dimensions d'une image. Voila comment proceder : 

cha rgeur. con tent Loader Info. add Event Listener (Event .COMPLETE, chargementTermine) ; 
function chargementTerminetevt: Event) { 

jauge. visible =false; 

t r ace (evt. cur rentTarget. width) ; 

t r ace (evt. cur rentTarget. height) ; 



Supprimer une image chargee 

La suppression d'une image s'effectue en deux etapes. Vous devez commencer par retirer 
votre objet d'affichage de la liste d'affichage. Precisons que l'objet d'affichage corres- 
pond a l'instance de la classe Load( ) que nous avons cree pour charger l'image ou a celle 
de la classe SprlteO qui contient le chargeur de type Load( ). Ensuite vous devez assigner 
la valeur nul 1 a l'instance que vous venez de retirer de la liste d'affichage. 



Creer une classe de chargement d'image 

Si vous devez regulierement charger des images dans une animation, il est conseille 
de creer une classe dediee que vous n'aurez plus qu'a instancier pour charger une 
simple image. 
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Fichiers de reference : Chapitrel2/Chargerlmage5.fla, main. as et Chargerlmage.as 

Dans cet exemple, nous avons cree une classe intitulee Chargerlmage( ) dans laquelle nous 
preciserons, lors de son instanciation, le nom de l'image et celui du dossier dans lequel 
elle se trouve. 

Dans le fichier Chargerlmage5.fla, nous avons defini le nom de la classe du document 
main. as, en bas a droite de la palette Proprietes. Dans la classe Chargerlmage.as, voici les 
lignes d' instructions qui ont ete saisies. 

package { 

import flash. display. Sprite 
import flash. display. Loader 
import flash. net. URLRequest 

dynamic public class Chargerlmage extends Sprite { 

public var adresseImage:URLRequest; 
public var chargeur: Loader; 

public function ChargerImage(nomDossier:String,nomImage:String) { 

adresselmage=new URLRequest(nomDossier+"/"+nomImage) ; 

chargeur=new LoaderO; 

chargeur. load(adresse Image) ; 

addChild(chargeur) ; 
} 
} 
} 

Vous remarquerez qu'il s'agit des memes lignes d' instructions que celles qui se trouvent 
dans le premier exemple. Cela signifie done que cette classe n'est pas tres compliquee a 
ecrire, des lors que vous maitrisez la programmation orientee objet. Allons voir a present 
a quoi ressemble le fichier mai n . as. 

package { 

import flash. display. Sprite; 

public class main extends Sprite { 

public var imageDeFond:ChargerImage; 
public var imageLogoiChargerlmage; 

function main( ) { 

imageDeFond = new Chargerlmage( "images" , "imageFond.png") ; 
imageLogo = new ChargerlmageC'images" , "logoYazo.png") ; 

addChild(imageDeFond) ; 
addChild(imageLogo) ; 

imageLogo. x=20; 
imageLogo. y=20; 
} 
} 
} 
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Ce script n'est pas plus complexe que la classe de chargement d'une image. Nous instan- 
cions simplement la classe ChargerlmageO en precisant le nom du dossier qui contient 
l'image puis le nom du fichier image, dans cet ordre. Nous terminons le script en ajoutant 
les deux images dans la liste d'affichage et nous placons le logo. Nous ne placons pas 
l'image de fond car elle possede les memes dimensions que la scene et vient se charger 
automatiquement dans le coin superieur gauche. 

Charger et controler un son 

Commencons par rappeler que seuls les fichiers au format MP3 sont geres en ActionScript, 
alors que vous pouvez importer n'importe quel type dans la bibliotheque via la commande 
Importer du menu Fichier. Comme, dans cet ouvrage, nous traitons de 1' ActionScript, il 
va de soi que nous deconseillons fortement 1' importation d'un fichier son dans une animation. 

Pour gerer le son dans une animation, vous devez utiliser plusieurs classes. Le langage 
AS3 en compte six, mais vous aurez besoin de faire appel uniquement a deux ou trois 
d'entre elles pour manipuler le son au quotidien. 

Lancer un son 

Pour une simple lecture de son, nous devons commencer par instancier les classes 
URLRequestO et SoundO. 

Fichier de reference : Chapitrel2/sonl.fla 



I 



var cheminSon:URLRequest = new URLRequest("Instru4.mp3" 
var enceinte = new Sound (cheminSon) ; 



Vous indiquez ainsi a Flash l'adresse du fichier, mais vous lui demandez egalement de se 
preparer a la lecture d'un son. Pour declencher celui-ci, il ne vous reste plus qu'a executer 
la commande pi ay ( ) . 

enceinte.pl ay( ) ; 

Si vos besoins en matiere de son ne sont pas plus importants, vous pouvez vous arreter la, 
mais nous vous conseillons tout de meme de poursuivre la lecture des paragraphes ci- 
dessous car vous allez surement decouvrir des fonctionnalites que vous pourriez utiliser. 

Les trois premieres lignes de code que nous venons de decouvrir pourraient etre ecrites 
differemment si nous chargions le son avec la methode 1 oad( ). 

var cheminSon:URLRequest = new URLRequest("Instru4.mp3") ; 
var enceinte = new SoundO; 
enceinte. load(cheminSon) ; 
enceinte. play( ) ; 

Si vous travaillez sur une petite application, cette methode est comparable a la premiere, 
le script contient juste une ligne supplementaire. En revanche, dans le cas de plus gros 
scripts, vous declarerez generalement vos deux instances des les premieres lignes 
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d'instructions et vous les instancierez plus loin dans le programme. Vous pourriez 
d'ailleurs faire la meme chose avec l'instance de la classe URLRequestt ). 

var cheminSon:URLRequest = new URLRequest( ) ; 
var enceinte = new SoundO; 

cheminSon.url = "Instru4.mp3" ; 
enceinte. load(cheminSon) ; 

enceinte. playO ; 

Lire un son a partir d'un instant precis 

Dans l'exemple ci-dessus, nous avons effectue une simple lecture avec la methode pi ay ( ). 

Nous aurions pu aj outer un parametre qui mentionne la position de la tete de lecture au 
moment du demarrage du son. Essayez le script precedent avec la valeur suivante : 

| enceinte. play(21000); 

La valeur passee en parametre a la methode pi ay ( ) est exprimee en millisecondes, ce qui 
donne, dans cet exemple, une lecture a partir de la 21 e seconde. 

Lire un son en boucle 

Les morceaux de musique que nous vous avons prepares avec GarageBand et fournis avec 
les exemples de ce livre ont ete realises de telle sorte qu'ils puissent etre mis en boucle. 
Pour lire un son un nombre determine de fois ou a l'infini, il vous sufht de preciser un 
deuxieme parametre a la methode pi ay( ). 

enceinte. play(0, 4) ; 

Le premier parametre precise le temps a partir duquel la lecture doit demarrer, le 
deuxieme precise le nombre de boucles. Indiquez une valeur tres elevee pour obtenir une 
lecture en continu. 



Remarque 

Pour qu'il ne se produise pas de blanc lors de I'ecoute d'un son en boucle, il faut traiter le fichier son afin 
qu'il ne possede aucun silence ou decalage de niveau d'onde entre la fin et le debut du son. 



Exemple 

Pour finir nos explications sur la lecture d'un son, voici un dernier script qui demontre la 
possibilite d'associer un son a un bouton. Pour l'instant, il n'est pas question d'arreter le 
son, nous allons juste le lancer. 



Remarque 

II aurait ete preferable de faire appel a un tableau et une boucle f or( ) pour ecrire ce script, mais dans un 
souci d'accessibilite a un plus grand nombre, nous ne I'avons pas fait. 
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Fichier de reference : Chapitrel2/son5.fla 



var cheminSon:URLRequest 
var enceinte:Sound; 



new URLRequest( ! 



btSon 1. add Event Li stener(MouseEvent.MOUSE_DOWN,l ireSon) 
btSon2.addEvent Li stener(MouseEvent.MOUSE_DOWN,l ireSon) 
btSon3. add Event Li stener(MouseEvent.MOUSE_DOWN,l ireSon) 
btSon4.addEvent Li stener(MouseEvent.MOUSE_DOWN,l ireSon) 

btSonl.sonURL = "Instrul.mp3" 

btSon2.sonURL = "Instru2.mp3" 

btSon3.sonURL = "Instru3.mp3" 

btSon4.sonURL = "Instru4.mp3" 

function li reSon(evt:MouseEvent) ( 

cheminSon.url = evt.currentTarget.sonllRL; 
enceinte = new Sound(cheminSon) ; 
enceinte. play( ) ; 



Arreter un son 



Commencons ce developpement par cette question : serait-il envisageable de gerer le son 
de facon professionnelle avec une seule piste son ? N'importe quel ingenieur du son vous 
repondrait non ! 

Sous sa forme actuelle, le script que nous avons saisi ne nous permet pas un controle 
parfait du son. Nous devons l'associer a une piste, ce que nous ferons au moment de la 
lecture. Pour cela, nous devons instancier la classe SoundChannel ( ) qui, elle, possede la 
methode stop( ) ce qui n'est pas le cas de la classe Soundt ). 

Fichier de reference : Chapitrel2/son2.fla 

I var cheminSon:URLRequest = new URLRequest("Instru4.mp3") ; 
var enceinte = new Sound(cheminSon) ; 
var pistel:SoundChannel ; 

Nous avons place sur la scene deux occurrences, intitulees btLecture et btArret, et nous 
leur associons deux gestionnaires d'evenement. 

Ibt Lecture. addEvent Li stener(MouseEvent.MOUSE_DOWN,l ireSon) ; 
btArret .add Event Listener (MouseEvent.MOUSE_DOWN, a rreterSon) ; 

Voici a present les fonctions de rappel 1 i reSon( ) et arreterSon( ). 

function li reSon(evt:MouseEvent) { 

pistel = enceinte. play( ) ; 
} 

function arreterSon(evt:MouseEvent) { 

pistel. stop( ) ; 
} 
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Elles sont tres courtes et tres simples car elles se limitent au lancement et a 1' arret du son. 
Comme nous le mentionnions plus haut, nous avons utilise l'instance de la classe Sound - 
Channel ( ) dans la ligne d'instruction de lecture du son. 

En conclusion, pour arreter un son vous devez non seulement faire appel a la methode 
stop( ), mais egalement assigner la lecture d'un son a une piste son, que vous creez a l'aide 
la classe SoundChannel ( ). 



Exemple 

Si vous utilisez correctement le fichier son2.fla, vous n'aurez pas de surprise. Mais 
essayez de cliquer plusieurs fois sur le bouton Lecture et de cliquer sur le bouton Arret 
sans avoir prealablement clique sur le bouton Lecture. Que constatez-vous ? La lecture 
du son est demultipliee a chaque clic sur le bouton Lecture et un message d'erreur apparait 
si le premier clic se fait sur le bouton Arret ! Pour pallier ces problemes, voici un nouveau 
script qui gere egalement l'apparence des boutons Lecture et Arret. 

Fichier de reference : Chapitrel2/son3.fla 

btArret.alpha=0.5; 

var cheminSon:URLRequest = new URLRequest("Instru4.mp3") ; 
var enceinte = new Sound(cheminSon) ; 
var pistel:SoundChannel ; 

bt Lecture. add Event Li stener(MouseEvent.MOUSE_DOWN,l ireSon) ; 

function 1 ireSon(evt:MouseEvent) { 

pistel = enceinte. play( ) ; 

btLecture.mouseEnabled = false; 

evt.currentTarget.alpha=0.5; 

btArret.alpha=l ; 

btArret.addEventListener(MouseEvent.MOUSE_DOWN,arreterSon) ; 
} 

function arreterSon(evt:MouseEvent) { 

pistel. stop( ) ; 

btLecture.mouseEnabled = true; 

btLecture.alpha=l; 

btArret.alpha=0.5; 
} 

L' analyse de ce script est interessante car sa construction est particuliere. Voici quelques 
remarques a son sujet : 

• Tout d'abord, vous noterez que nous avons rendu le bouton Arret transparent pour 
exprimer le fait qu'il n'est pas cliquable. 

• Nous creons un ecouteur qui gere la fonction arreterSonO seulement a partir du moment 
oil l'utilisateur a clique sur le bouton Lecture. 

• Nous utilisons la propriete mouseEnabl ed pour interdire le clic sur le bouton Lecture lorsque 
la lecture du son est en cours. 
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Nous changeons l'apparence des boutons Lecture et Arret en faisant varier leur 
opacite. Nous aurions tout autant pu utiliser la propriete blendMode (par exemple : 

btLecture.blendMode = Bl endMode. SCREEN). 



Attention 

Nous n'allons pas I'expliquer maintenant, mais cette application contient une erreur qui est abordee dans 
le developpement Gerer la fin de la lecture d'un son. 



Controler le niveau sonore 



Remarque 

Afin que les explications relatives au reglage du son soient tres claires nous ne reprendrons pas le script 
precedent qui permet de controler le lancement et I'arret du son. 



Le reglage du niveau sonore est considere comme une transformation. C'est pourquoi 
nous devons utiliser une classe supplementary SoundTransformO, a partir de laquelle 
nous allons creer une instance. Nous lirons alors la propriete soundTransf orm, qui contient 
d'autres proprietes telles que volume ou pan. Le reglage du niveau sonore s'effectue au 
niveau de la piste et non sur l'instance de la classe Sound( ). 

Commencons notre script par quelques lignes d' instructions qui nous permettent de 
lancer un son. 

var cheminSon:URLRequest = new URLRequest("Instru4.mp3") ; 
var chainehifi = new Sound(cheminSon) ; 

var enceinteFacade:SoundChannel ; 
enceinteFacade = chainehifi .play( ) ; 

Ensuite, nous devons instancier la classe SoundTransf orm( ) pour pouvoir acceder ulterieu- 
rement a la propriete vol ume. 

var regl agesAudio:SoundTransform = enceinteFacade. soundTransform; 

Vous noterez que nous instancions la classe tout en chargeant prealablement les reglages 
par defaut de l'instance enceinteFacade. Nous pouvons maintenant faire reference a cette 
instance et a la propriete vol ume. 

reglagesAudio.vol ume = 0.8; 



Remarque 

Les valeurs de reglage du niveau sonore s'etalent de a 1 . Utilisez la valeur 0.5 pour un reglage a 50 %. 
Au-dela de 1 et jusqu'a 4, le son sera de plus en plus fort, mais il perdra en qualite d'ecoute. Lorsque vous 
depassez 4, le son devient vraiment inaudible. Notons tout de meme que cette valeur peut varier selon la 
qualite des enceintes de votre ordinateur. 
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Enfin, le reglage du niveau sonore est obtenu a l'aide de la propriete soundTransform. 

enceinteFacade.soundTransform = reglagesAudio; 

Dans le cas ou vous souhaiteriez realiser un variateur pour regler le volume ou la balance 
d'un son, consultez l'animation draganddrop4.fla du chapitre 4, qui traite de l'execution 
d'une action lorsque vous deplacez un curseur sur une graduation. 

Pour conclure, voici deux scripts complets qui vous permettront d' avoir un apercu du 
code necessaire pour gerer le son dans une animation. 



Exemple 1 

Ce premier script permet simplement de lancer un son et de regler son niveau sonore a 
80 % de son intensite d'origine. 

var cheminSon:URLRequest = new URLRequest("Instru4.mp3") ; 
var chainehifi = new Sound(cheminSon) ; 

var enceinteFacade:SoundChannel ; 
enceinteFacade = chainehifi . pi ay ( ) ; 

var reglagesAudio: SoundTransform = enceinteFacade.soundTransform; 
reglagesAudio. volume = 0.8; 
enceinteFacade.soundTransform = reglagesAudio; 

Exemple 2 

Trois occurrences de clipontete placees sur la scene et nominees btNiveaulO, btNiveau50, 
btNiveaulOO. Nous leur affectons a chacune un gestionnaire charge de regler le niveau 
sonore a des valeurs differentes. 

Fichier de reference : Chapitrel2/son4.fla 

var cheminSon:URLRequest = new URLRequest("Instru4.mp3") ; 
var chainehifi = new Sound(cheminSon) ; 

var enceinteFacade:SoundChannel ; 
enceinteFacade = chainehifi .play( ) ; 

var reglagesAudio:SoundTransform = enceinteFacade.soundTransform; 



bt Ni vea ulOO. addEven t Li s tener (Mouse Event. C LI CK.ni veauSon 100) ; 
btNiveau50.addEventListener(MouseEvent.CLICK,niveauSon50) ; 
btNiveaulO.addEventListener(MouseEvent.CLICK.niveauSonlO) ; 

function niveauSonlOO(evt :MouseEvent) { 

reglagesAudio. vol ume = 1; 

enceinteFacade.soundTransform = reglagesAudio; 
} 
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function niveauSon50(evt:MouseEvent) { 

reglagesAudio.vol ume = 0.5; 

enceinteFacade.soundTransform = regl agesAudio; 
} 

function niveauSonlO(evt:MouseEvent) { 
reglagesAudio.vol ume = 0.1; 
enceinteFacade.soundTransform = regl agesAudio; 



Controler la balance d'un son 

Avant de lire ce passage, consultez le developpement precedent, Controler le niveau sonore. 

Pour regler la balance d'un son, nous allons devoir faire appel a la propriete pan. Les valeurs 
qu'elle peut recevoir s'etendent de -1 a 1 car elles representent le dosage du niveau 
sonore dans l'enceinte de gauche et de droite du dispositif audio de votre ordinateur. Vous 
devriez done obtenir un script comme celui-ci : 

var cheminSomURLRequest = new URLRequest("Instru4.mp3") ; 
var chainehifi = new Sound(cheminSon) ; 

var enceinteFacade:SoundChannel ; 
enceinteFacade = chainehifi .play( ) ; 

var regl agesAudio:SoundTransform = enceinteFacade.soundTransform; 
regl agesAudio. pan = -1; 
enceinteFacade.soundTransform = reglagesAudio; 

Affectez la valeur pour retablir l'equilibre du niveau sonore dans les deux enceintes de 
votre ordinateur. 



Gerer la fin de la lecture d'un son 

II est utile de detecter le moment ou la lecture d'un son se termine pour plusieurs raisons. 
Bien que cela depende de la nature et de l'interactivite de votre animation, citons tout de 
meme ces deux exemples : 

• Dans le fichier son3.fla, nous avons ete capable de controler l'apparence des boutons 
Lecture et Arret. Nous avons desactive le clic sur le bouton Lecture afin qu'on ne 
puisse pas ecouter plusieurs sons a la fois, mais lorsque la lecture du son se termine, il 
n'est plus possible de cliquer a nouveau sur le bouton Lecture. 

• Lorsque nous devons enchainer deux lectures de sons ou synchroniser la fin de la 
lecture d'un son avec une autre action, la detection de la fin de la lecture d'un son est 
essentielle. 
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Fichier de reference : Chapitrel2/son6.fla 

Dans cet exemple, nous allons utiliser un gestionnaire d'evenement pour pouvoir executer 
des lignes d' instructions a la fin de la lecture d'un son. Notez que la technique est 
particulierement simple. 

var cheminSon:URLRequest = new URLRequest("Instru2.mp3") ; 
var chainehifi = new Sound(cheminSon) ; 
var pistePercussions:SoundChannel ; 
pistePercussions = chainehifi . pi ay ( ) ; 

pi stePercuss ions. addEvent Li stenert Event. SOUND_COMPLETE,sonTermine) ; 

function sonTermine(evt:Event) { 

cheminSon.url="Instru3.mp3" ; 

chainehifi = new Sound(cheminSon) ; 

pistePercussions = chainehifi .pi ay( ) ; 
} 

Si nous comparons ce script avec les premiers que nous avons pu decouvrir dans ce 
chapitre au sujet du son, nous constatons que nous avons simplement ajoute ces quelques 
lignes : 

pi stePercuss ions. addEvent Li stenert Event. SOUND_COMPLETE,sonTermine) ; 

function sonTermine(evt:Event) { 

instruction a realiser lorsque le son est termine; 
} 

La classe Event possede la constante SOUNDCOMPLETE qui est invoquee tout naturellement a 
la fin de la lecture d'un son. 

Dans le fichier son3.fla, evoque en introduction a ce developpement, il faudrait done 
ajouter ce gestionnaire d'evenement et retablir les proprietes mouseEnabled et alpha que 
nous avions utilisees. 

Realiser une jauge de lecture 

Fichier de reference : Chapitrel2/son7.fla 

Pour realiser une jauge de progression de la lecture d'un son, nous allons tout simplement 
chercher a executer en boucle, grace a l'evenement Event. ENTER_FRAME d'un gestionnaire, 
une ligne d'instruction chargee de regler l'echelle horizontale d'une occurrence en fonction 
de la position de la tete de lecture par rapport a la duree totale du son. 



Remarque 

Linstance jauge est un rectangle plus large que haut que nous avons place sur la scene. 



jauge. addEvent Li stener( Event. ENTER_FRAME,animerJaugeLecture) ; 

function animerJaugeLecture(evt:Event) { 

jauge. scaleX = pistel.position/chainehifi .length; 
} 
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Vous noterez que nous obtenons la position de la tete de lecture en lisant la propriete 
position de l'instance de la classe SoundChannel (), alors que la duree du son estrenvoyee 
par la propriete length de l'instance de la classe SoundO. A l'exception de ce detail, le 
script est assez logique, mais il presente quelques erreurs dans son application. 

Linitialisation de la jauge et la valeur NaN 

Au lancement de l'animation son7 . f 1 a, vous pouvez constater que le rectangle qui represente 
la jauge de chargement est completement rempli, et que cette jauge bascule completement 
a gauche. 

Lorsque l'animation est lancee, la ligne d'instruction de la fonction de rappel animerJauge- 
Lecture( ) n'a pas encore ete executee car le son n'est pas encore charge. La jauge ne peut 
done etre reglee a des le lancement de l'animation. II faut par consequent regler ce 
parametre en utilisant la propriete scaleX. Par ailleurs, le resultat du calcul du rapport 
pistel.position/chainehifi .length donne la valeur NaN (ce qui signifie Not a Number), ce 
qui est du a une division par zero, la propriete 1 ength ayant une valeur nulle. Toujours est-il 
que la jauge est reglee a -1 en scaleX, ce qui se traduit par le sursaut de la jauge vers la 
gauche. Pour eviter ces deux problemes, nous devons done ecrire : 

var cheminSon:URLRequest = new URLRequest("Instru4.mp3") ; 
var chainehifi = new Sound(cheminSon) ; 
var pistel:SoundChannel ; 

jauge. scaleX=0; 

pistel = chainehifi .play( ) ; 

j auge.addEvent Li stenert Event. ENTER_FRAME, an i me r Jauge Lecture) ; 

function animerJaugeLecture(evt:Event) { 

if (pistel.position/chainehifi .length>=0) { 

jauge. scaleX = pistel.position/chainehifi .length; 
} 
} 



Remarque 

L'utilisation du if ( ) n'est utile que dans cet exemple. Dans le suivant, la lecture du son ne va pas etre 
automatique mais obtenue a partir d'un die ; ce test sera done inutile. 



Ann que vous puissiez inserer facilement ce code dans un de vos programmes, nous vous 
avons prepare une animation plus globale sur la gestion d'une jauge, mais elle ne gere 
pas correctement les boutons Lecture et Arret, ce qui aurait produit un script trop long. 
Consultez l'animation son3.fla pour completer le script ci-dessous. 

Fichier de reference : Chapitrel2/son8.fla 

I var cheminSon:URLRequest = new URLRequest("Instru4.mp3") ; 
var chainehifi = new Sound(cheminSon) ; 
var pistel:SoundChannel ; 
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bt Lecture. add Event Li stener(MouseEvent.MOUSE_DOWN,l ireSon) ; 
btAr ret. addEvent Listener (Mouse Event. M0USE_D0WN, a rreterSon) ; 

function 1 ireSon(evt:MouseEvent) { 
pistel = chainehifi .play( ) ; 
j a uge. addEvent Li stener( Event. ENTER_FRAME,animerJauge Lecture) ; 

} 

function arreterSon(evt:MouseEvent) { 

pistel. stopO ; 

jauge. remove Event Listener (Event. ENTER_FRAME,animerJaugeLecture) ; 
} 

function animerJaugeLecture(evt:Event) { 

jauge. scaleX = pistel. position/chainehifi .length; 
} 

Vous remarquerez que nous supprimons l'ecouteur qui gere l'evenement Event . ENTER_FRAME 
lorsque nous cliquons sur le bouton Arret : il est en effet inutile de demander a Flash de 
chercher a mettre a jour l'affichage de l'echelle de l'occurrence jauge alors qu'il n'y a pas 
de changement. 

Par ailleurs, n'oubliez pas non plus de pre voir dans la fonction de rappel du gestionnaire 
d'evenement Event. S0UND_C0MPLETE, la suppression de l'ecouteur qui gere l'evenement 

Event. ENTER_FRAME. 



Effectuer une pause 

Aussi curieux que cela puisse vous paraitre, la methode pause( ) n'existe pas dans la classe 
SoundChannel ( ) ni meme dans la classe Sound ( ). Nous allons done devoir la programmer. 
Rassurez-vous, la technique est extremement basique et logique. 

Fichier de reference : Chapitrel2/son9.fla 

Pour cela, il faut utiliser une variable pour memoriser la position de la tete de lecture au 
moment oil la lecture du son est interrompue. Lorsque nous reprendrons la lecture du son, 
nous utiliserons alors la methode pi ay( ) de la classe Sound ( ) en precisant en parametre 
la valeur contenue dans la variable. 

var positionTete:Number=0; 

var cheminSon:URLRequest = new URLRequest("Instru4.mp3") ; 
var enceinte = new Sound(cheminSon) ; 
var pistel:SoundChannel ; 

bt Lecture. add Event Li stener(MouseEvent.MOUSE_DOWN,l ireSon) ; 

function 1 ireSon(evt:MouseEvent) { 
if (btLecture. etiquette. text =="Lecture") { 
btLecture. etiquette. text ="Pause" ; 
pistel = enceinte. play(positionTete) ; 
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else { 

btLecture. etiquette. text ="Lecture" ; 
posi ti onTete=pi stel . posi ti on ; 
pistel. stop( ) ; 



Dans cet exemple, nous changeons le contenu d'un texte qui se trouve dans le bouton sur 
lequel nous cliquons, mais nous aurions egalement pu controler la tete de lecture d'un 
clip qui possede deux images-cles. 

Par ailleurs, n'oubliez pas de prevoir dans la fonction de rappel de votre gestionnaire 
d'evenement Event. S0UND_C0MPLETE la reinitialisation du texte figurant sur le bouton. 



Gerer la fin du chargement d'un son 

II est parfois necessaire de connaitre l'instant oil la fin du chargement du son se produit ; 
vous utiliserez alors l'evenement Event. COMPLETE. La technique est extremement simple, 
car il s'agit d'un gestionnaire classique que vous definissez sur l'instance de la classe 

Sound( ). 

var cheminSon:URLRequest = new URLRequest("Instru4.mp3") ; 
var chainehifi = new Sound(cheminSon) ; 
var pistel:SoundChannel ; 
pistel = chainehifi .pi ay( ) ; 

chainehifi .add Event Li stener( Even t.COMPLETE.chargementTermine) ; 

function chargementTermine(evt: Event) { 
messageFin.text=" Chargement termine" ; 
} 

Dans cet exemple, nous avons demande la lecture du son avant meme qu'il soit comple- 
tement charge ; c'est tout a fait normal : nous employons le telechargement progressif 
qui caracterise la technologie Flash. Le risque que la lecture du son soit interrompue a 
cause d'un debit trop bas est assez faible : les debits proposes aujourd'hui par les diffe- 
rents fournisseurs d'acces a Internet sont assez eleves. Cependant, si vous souhaitiez ne 
prendre aucun risque, vous pourriez alors adapter ce script de la facon suivante : 

var cheminSomURLRequest = new URLRequest("Instru4.mp3") ; 
var chainehifi = new Sound(cheminSon) ; 
var pistel:SoundChannel ; 

chainehifi .add Event Listener (Even t.COMPLETE.chargementTermine) ; 

function chargementTerminetevt: Event) { 

pistel = chainehifi .play( ) ; 
} 

La demande de lecture du son est effectuee dans la fonction de rappel qui est appelee 
uniquement a la fin du chargement du son ! 
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Realiser une jauge de chargement 

Pour conclure nos explications sur le son dans une animation Flash, decouvrons deux 
dernieres proprietes qui vous nous permettre de realiser une jauge de prechargement. 
Nous allons simplement creer un ecouteur qui va gerer l'evenement Event. ENTER^FRAME. 

var cheminSon:URLRequest = new URLRequest("Instru4.mp3") ; 
var chainehifi = new Sound(cheminSon) ; 
var pistel:SoundChannel ; 

jauge.addEventListener(Event.ENTER_FRAME,animerJaugeLecture) ; 
chainehifi .add Event Li stenert Event. COMPLETE, chargementTermine) ; 

function animerJaugeLecture(evt:Event) { 

jauge.scaleX = chainehifi .bytesLoaded/chainehifi .bytesTotal ; 
} 

function chargementTermine(evt:Event) { 

pistel = chainehifi . pi ay ( ) ; 
} 

Vous noterez que nous avons egalement ajoute le gestionnaire d'evenement Event. COMPLETE 
dans cet exemple, car nous demandons la lecture de notre son uniquement a la fin de 
1' animation du prechargement. 



Charger et controler une video 

Comme nous l'evoquions deja dans ce chapitre, ce livre est dedie a 1'ActionScript. Nous 
allons done creer l'instance du composant FLVP1 ayback a partir de lignes d'instructions et 
non pas au travers de l'interface. Si vous preferez effectuer un glisser-deposer du compo- 
sant FLVPlayback de la bibliotheque vers la scene, ne lisez pas le developpement suivant, 
Creer une occurrence de type FLVPlayback, et passez directement a la suite, Configurer 
une occurrence de type FLVPlayback. 

Creer une occurrence de type FLVPlayback 

Fichier de reference : Chapitrel2/videol.fla 

Si vous suivez nos developpements depuis les premieres pages, vous aurez pu remarquer 
que nous essayons de vous pousser a coder tout ce qui peut l'etre, vous evitant ainsi 
d'utiliser l'interface. Pour la video, nous allons proceder de meme, sans tomber dans 
1' extreme. Sur Internet, a travers de nombreux cours, on observe depuis plusieurs mois 
une utilisation intensive des classes NetConnectionO et NetStreamO pour gerer la video. 
C'est a croire que la communaute des codeurs AS3 a oublie l'existence du composant 
FLVP1 ayBack qui est tres bien concu et surtout tres pratique. Voici comment l'utiliser. 



Remarque 

Avant de suivre ces explications, assurez-vous d'avoir enregistre votre animation. 
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1. Commencez par importer manuellement un composant de type FLVPlayback dans la 
bibliotheque de votre animation. 

2. Placez une video au format FLV dans le dossier oil se trouve votre animation. 

3. Saisissez les lignes d' instructions ci-dessous : 

import fl .video. FLVPlayback; 

var ecranVideo: FLVPlayback; 

ecranVideo = new FLVPlaybackC ) ; 
ecranVideo. source = "Luna.flv"; 
addChild(ecranVideo) ; 

II s'agit du minimum de code a saisir pour obtenir une video sur la scene. Nous commencons 
par importer la classe FLVP1 aybackt ) et creer une instance du meme type avant de l'ajouter 
a la liste d'affichage. Nous definissons egalement un chemin vers une video. 

A ce niveau du developpement, nous ne disposons pas d'un controleur de video. Pour cela, 
il faut aj outer une ligne de code qui va etablir un lien entre le fichier SWF de 1' animation 
et celui de l'enveloppe (skin) du controleur. 




Figure 12-1 

Pour controler une video, vous devez utiliser un controleur plus connu sous le nom de skin en ActionScript. 



II existe plusieurs sortes d'enveloppes de controleur. II s'agit de fichiers au format SWF qui se 
trouvent dans le dossier Adobe Flash CS3/ Configuration/FLVPlayback Skins/ActionScript 3.0. 
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Figure 12-2 

II existe de nombreuses enveloppes, car vous pouvez choisir entre plusieurs configurations. 



Selectionnez l'un des flchiers SWF dans ce dossier Acti onScri pt 3 . et copiez-le dans le 
dossier ou se trouve votre animation Flash et la video que vous utilisez. Dans notre cas, 
nous avons pris le fichier qui s'intitule Ski nOverAl 1 NoFul 1 NoCapti on . swf que nous rebaptisons 

controleur.swf. 



Remarque 

Les fichiers dont le nom commence par SkinUnder proposent des controleurs qui se placent sous la 
video. 



Ajoutez la ligne d'instruction ci-dessous pour afficher un controleur sur la video. 



ecranVideo.skin = "controleur.swf"; 

Terminez le script en definissant une largeur et une hauteur d'image : 

ecranVideo. width = 384; 
ecranVideo. height = 216; 

Le script complet devrait maintenant ressembler a celui-ci : 

import fl .video. FLVPlayback; 

var ecranVideo: FLVPlayback; 

ecranVideo = new FLVP1 ayback( ) ; 
ecranVideo. source = "Luna.flv"; 
addChild(ecranVideo) ; 

ecranVideo.skin = "controleur.swf"; 

ecranVideo. width = 384; 
ecranVideo. height = 216; 

Voyons a present les techniques de configuration d'une occurrence de type FLVP1 ayback. 
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Configurer une occurrence de type FLVPIayback 

Parmi les differents reglages que vous pouvez effectuer sur une occurrence de ce type, 
voici les plus importants. 

Fichier de reference : Chapitrel2/video2.fla 

Les reglages relatifs a I'enveloppe (skin) 

Si vous disposez d'une video tres coloree avec une dominante importante ou d'une video 
en noir et blanc, vous souhaiterez peut-etre choisir la couleur de I'enveloppe afin de garder 
une certaine harmonie des couleurs dans votre interface. II suffit alors d'ajouter une ligne 
d' instruction a celles que nous venons de voir dans le developpement precedent. Si vous avez 
place une video sur la scene par un glisser-deposer, cette ligne d' instruction constituera la 
premiere ligne de code de votre script. 

ecranVideo.skin = "controleur.swf "; 

Vous pouvez egalement ajouter ces trois autres lignes qui sont, elles aussi, facultatives. 

IecranVideo.skinBackgroundAlpha=0.6; 
ecranVideo.skinAutoHide = true; 
ecranVideo.skinFadeTime = 2000; 

La premiere ligne permet de rendre I'enveloppe plus ou moins transparente ; vous devez 
utiliser une valeur comprise entre et 1 . 

La deuxieme ligne permet de masquer automatiquement le controleur lorsque le curseur 
de la souris ne se trouve pas sur la video. Cette ligne d'instruction est particulierement 
importante, voire indispensable lorsque vous optez pour une enveloppe de type SkinOver. . . 

La troisieme ligne sert a regler la vitesse de fondu entrant et sortant pour afficher ou 
masquer le controleur. Vous noterez que la valeur est exprimee en millisecondes. 

Linitialisation du mode de lecture 

Lorsque vous diffusez une video dans une animation, il est important de definir le mode 
de lecture. Soit vous souhaitez que l'utilisateur clique sur le bouton lecture du controleur, 
soit, au contraire, vous preferez que la lecture demarre automatiquement. Le reglage de 
ce parametre passe par la propriete autoPl ay qui prend pour valeur true ou f al se. 

| ecranVideo.autoPlay = false; 

De la meme facon, c'est a vous de definir le retour automatique de la tete de lecture a la 
fin de la lecture d'une video. 

ecranVideo.autoRewind = false; 

La video plein ecran 

Depuis Flash CS3, il est possible d' afficher une video en plein ecran, que ce soit dans un 
navigateur ou a partir d'un projecteur. 
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Pour cela, vous devez effectuer un certain nombre de manipulations. 

1. Commencez par choisir une enveloppe qui possede le bouton plein ecran situe a 
droite du controleur. 

Figure 12-3 

Le bouton plein ecran ne se trouve pas 
sur toutes les enveloppes. Vous devez 
en choisir une qui le propose. 



2. Publiez votre animation via la commande Parametres de publication. . . du menu Fichier. 

Si vous generez une page HTML, faites tres attention de regler 1' option Modele de 
l'onglet HTML sur Flash seulement - Autorisation du plein ecran. 

Figure 12-4 

Vous ne pourrez pas generer le fichier 
AC_RunActiveContent.js si vous ne 
reglezpas le modele sur Flash seulement 
- Autorisation plein ecran ; vous 
n 'obtiendrez done pas un affichage 
en plein ecran. 




Profil acme I : 


1 Dtfaut *| |[*>J*|Ea|o|T 














Modele: ' Flash seultmem - Alitor!*... b+4 { Infos ) 
Detecter !a version de Flash 

Vernon 9 „ " 



Nous vous conseillons egalement de cocher la case Detecter la version de Flash en 
conservant la version 9.0.45 par defaut, pour inviter l'utilisateur a charger la bonne 
version du lecteur au cas ou il en possederait une plus ancienne. 

Si vous realisez un projecteur, il est important de savoir qu'il comporte une erreur qui empe- 
che le vrai mode plein ecran de la video, si votre animation est deja afhehee en plein ecran. 

Lorsque vous lancez un projecteur ou une page HTML, il ne reste plus qu'a cliquer sur le 
bouton plein ecran pour l'afficher dans ce mode. 



Attention 

Flash genere une fichier qui s'intitule AC_RunActiveContent. js lorsque vous publiez une animation 
avec une video plein ecran. N'oubliez pas de la placer toujours avec I'enveloppe. 



Consultez le developpement suivant pour decouvrir qu'il est possible de basculer en 
mode plein ecran sans disposer d' enveloppe. 

Controler une video 

Fichier de reference : Chapitrel2/video3.fla 

Nous pourrions etre tente de dire qu'il n'est pas necessaire d'aborder les proprietes et 
methodes de la classe FLVPlaybackO servant a controler une video, dans la mesure ou 
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l'enveloppe nous offre toutes les fonctionnalites necessaires. Cependant, il existe des 
situations ou vous ne disposerez pas d'une enveloppe, notamment dans le cas oil vous 
souhaitez personnaliser le controleur. 

Les proprietes et methodes de lecture 

Tableau 12-1 Methodes et proprietes servant a controler la lecture d'une video 



Methode/Propriete 


Descriptif 


Remarque 


seek( ) 




Methode qui permet de deplacer la tete de lec- 
ture a une position precise. 


Valeur exprimee en secondes. 


playO 




Methode qui permet de lancer la lecture d'une 
video. 




paused 




Methode qui permet de mettre une video en 
pause. 




stop( ) 




Methode qui permet d'arreter la lecture d'une 
video. 




vol ume 




Propriete qui permet de regler le volume. 


Valeur comprise initialement entre et 1 
(par exemple 0.5 pour 50 % du niveau par 
defaut). Vous pouvez depasser cette valeur 
jusqu'a la limite du potentiel de vos enceintes. 


fullScreenl 


utton 


Propriete qui definit le nom d'occurrence ser- 


Attention : vous devez placer sur la scene, 






vant a basculer la projection d'une video en 


un composant de type Bouton Plein ecran 






plein ecran. 


(figure 1 2-5). Personnalisez ensuite les clips 
imbriques qu'il contient pour changer son 
apparence. 


fullScreenB 


ackgroundColor 


Propriete qui regie la couleur du fond d'ecran 
lorsqu'une video est en plein ecran et qu'elle 
ne recouvre pas I'integralite de la surface de 
I'ecran. 


Valeur en hexadecimal. 



* <Jl User Interface 
w r$ Video 

□ TLVPIJYlMCk 
P rLVPIjvbackCip 
j+J Ban kB utton 
!2& Butferingltar 
SJ CaptionButton 
GD ForwjrdButto-n 
zH rullScrcenBunon 
jj MutcButton 

ieBulton 

'Butt-on 

■23) f diPjuSCBjUO-i 

-J Seek&ar 
JU StopBution 
.-j VolumtBar 

Figure 12-5 

Utilisez le composant video Bouton Plein ecran pour pouvoir utiliser la propriete fullScreenButton. 
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Voici le script de l'animation video3.flv qui vous propose un controle de la video sans 
passer par un controleur. 

import fl .video. FLVPlayback; 

var ecranVideo: FLVPlayback; 

ecranVideo = new FLVP1 ayback( ) ; 
ecranVideo. source = "Luna.flv"; 
addChild(ecranVideo) ; 

ecranVideo. width = 384; 
ecranVideo. height = 216; 

ecranVideo. x=(500-384)/2; // Nous centrons la video horizontal ement 

ecranVideo. y=(300-216)/2; // Nous centrons la video vertical ement 

// 

bt Lecture. add Event Li stener(MouseEvent.MOUSE_DOWN, lecture) ; 

bt Pa use. addEvent Listener (Mouse Event. MOUSE_DOWN,enPause) ; 

btAr ret. addEven t Listener (Mouse Event. M0USE_D0WN, arret) ; 

btVolumePl us. addEvent Li stener(MouseEvent.MOUSE_DOWN,monterVol ume) ; 
btVolumeMoins .add Event Li stener(MouseEvent.MOUSE_DOWN,baisserVol ume) ; 

btMoinsDix. add Event Li stener(MouseEvent.MOUSE_DOWN,depl ace rTeteAvant) ; 
btPl usDix.addEventListener(MouseEvent.MOUSE_DOWN,depl acerTeteApres) ; 

function lecture(evt:MouseEvent) { 

ecranVideo. play( ) ; 
} 
function enPause(evt:MouseEvent) { 

ecranVideo. pauseO ; 
} 
function arret(evt:MouseEvent) { 

ecranVideo. stop( ) ; 
} 



function monterVol ume(evt:MouseEvent) { 

ecranVideo. volume += 0.2; 
} 
function baisserVolume(evt:MouseEvent) ( 

ecranVideo. volume -= 0.2; 
} 

function depl acerTeteAvant(evt:MouseEvent) { 
ecranVideo.seek(ecranVideo.playheadTime-2) ; 

} 

function depl acerTeteApres(evt:MouseEvent) { 
ecranVideo. seek( ecranVideo. pi ay headTime+2) ; 

} 

ecranVideo. fullScreenButton = btPleinEcran; 
ecranVideo. ful IScreenBackgroundColor = 0x333333; 
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Les proprietes et methodes pour une jauge de lecture 

Fichier de reference : Chapitrel2/video4.fla 



Remarque 

Dans le fichier video4 . f 1 a, nous n'avons pas place I'instance de la classe FLVP1 ayback( ) a partir de la 
ligne d'instructions pour que toute votre attention se porte sur le code qui gere le defilement de la jauge de 
lecture. 



Les enveloppes proposees dans 1' interface de Flash presentent une jauge de lecture, mais, 
elle n'affiche pas pour autant la duree de la video, ni meme le temps a la position de la 
tete de lecture. Nous allons done reecrire une jauge de lecture accompagnee des deux 
valeurs que nous venons de mentionner. 

Nous devons commencer par creer sur la scene, manuellement ou dynamiquement, deux 
textes dynamiques. Nous les nommons dureeTotale et positionTete. Nous placons egale- 
ment un rectangle assez large representant la jauge de lecture que nous intitulons jauge. 
Nous devons a present definir des gestionnaires d'evenements pour executer des lignes 
d'instructions au chargement de la video, durant la lecture et a la fin de la video. 

ecran.addEvent Listener (Metadata Event. METADATA_RECEIVED,repereAtteint) ; 
ecran.addEventListener(VideoEvent.PLAYHEAD_UPDATE, lectureEnCours) ; 

ecran.addEvent Li stener(VideoEvent.COMPLETE,videoTermi nee) ; 

Pour obtenir le temps a la position de la tete de lecture, nous allons utiliser la propriete 
playheadTime de la classe FLVPlayback( ). Pour determiner la duree d'une video, nous 
devons lire la propriete duration contenue dans l'objet de la fonction de rappel invoquee 
par l'ecouteur qui gere l'evenement MetatdataEvent.METADATA_RECEIVED. Si vous ne 
comprenez pas bien cette derniere phrase, aidez-vous du script ci-dessous pour localiser 
la propriete duration. 

Vous devriez obtenir un script global comme celui-ci : 

import fl .video.*; 

// 

//Declaration des variables 

// 

var dureeVideo: Number; 

// 

//## Au debut de la lecture 

// 

ecran Vi deo. add Event Listener (Metadata Event .METADATA_RECE IV ED, repereAtteint) ; 

function repereAtteint(evt:MetadataEvent) { 

dureeVideo = evt. info. duration; 

dureeTotale. text = convertirTemps(evt. info. duration) ; 
} 

// 
// #### En cours de lecture 
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// 

ecranV 

functi 
posi 
jaug 

} 

// 

// 

// 

ecranV 

functi 
//le 

} 



ideo.addEventListener(VideoEvent.PLAYHEAD_UPDATE, lectureEnCours) ; 
on lectureEnCours(evt:VideoEvent) { 

t ionTete.text=con vert irTemps( ecranVideo.pl ayheadTinte) .toString( ) ; 
e. sea leX=ecr anVideo.pl ay headTime/dureeVideo; 



Lorsque la video est terminee 



ideo. add Event Li stenertVideoEvent. COMPLETE, videoTermi nee) 
on videoTerminee(evt:VideoEvent) { 
gende.text="Fin" ; 



function converti rTemps(tempsEcoule) :String { 

var minutes=Math.floor(tempsEcoule / 60); 

var secondes=Math.floor(tempsEcoule % 60); 

minutes=minutes <= 9?"0" + minutesiminutes ; 

secondes=secondes <= 9?"0" + secondes:secondes ; 

var tempsFinal=minutes + ":" + secondes; 

return tempsFinal ; 
} 

Cette derniere fonction ne sert qu'a convertir l'affichage des temps renvoyes par les 
proprietes playheadTime et duration. 



Gerer les reperes de temps (cuePoints) 

Fichier de reference : Chapitrel2/video5.fla 

Des qu'il vous faudra synchroniser des instants precis dans une video avec des actions 
dans une animation, vous devrez gerer des reperes de temps, appeles aussi cuePoints. 
Decouvrons done a present la technique d'ajout et de detection des reperes de temps. 

Commencez par creer un texte dynamique sur la scene que vous nommez 1 egende. 

Ajout des reperes 

Nous devons maintenant ajouter des points de reperes dans la video avant de pouvoir les 
detecter a la lecture. Pour cela, vous devez utiliser la methode addASCuePoint( ) et preciser 
deux parametres. Le premier indique l'instant t auquel le repere doit etre place. Le 
deuxieme contient eventuellement un texte qui peut etre affiche sur la scene, ce que nous 
allons faire dans cet exemple. 



Astuce 

Vous pouvez stacker un numero en guise de nom de repere afin de I'utiliser comme numero d'index dans 
un tableau ou une arborescence XML. 
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IecranVideo.addASCuePoint(2.5,"0h !"); 
ecranVideo.addASCuePoint(5,"Regarde combien j'en ai !"); 
ecranVideo.addASCuePointdO, "C'est bien beaucoup !"); 

II serait plus judicieux d'effectuer une boucle for() et de parcourir un tableau ou un 
fichier XML pour definir les differents reperes a placer dans une video. 

Detecter des reperes 

Nous allons faire appel a un ecouteur qui gere l'evenement MetadataEvent.CUE_POINT, et 
nous allons chercher a lire la propriete info, name contenue dans l'objet renvoye a la fonction 
de rappel repereAttei nt( ) de notre exemple. 

ecranVi deo. add Event Listener (Metadata Event .CUE_P0 INT, repereAtteint) ; 
function repereAtteint(evt:MetadataEvent) { 

legende.text = evt. info. name; 
} 

Si le nom du repere est un nombre, n'oubliez pas de l'utiliser en tant qu'index pour 
parcourir un tableau ou une arborescence XML. Retrouvez un exemple employant cette 
technique apres le script ci-dessous. 

Le fichier vi deo 5 . f 1 a contient le script global suivant : 

import fl .video.*; 

// Ajouter des reperes 
ecranVideo.addASCuePoint(2.5,"0h !"); 
ecranVideo.addASCuePoint(5,"Regarde combien j'en ai ! " ) ; 
ecranVideo.addASCuePointdO, "C'est bien beaucoup !"); 

//Detecter des reperes 

ecranVi deo. add Event Listener (Metadata Event. CUE_P0 1 NT, repereAtteint) ; 

function repereAtteint(evt:MetadataEvent) { 

legende.text = evt. info. name; 
} 

Dans cet exemple, nous ne gerons pas l'effacement des textes apres un certain laps de temps 
entre deux reperes. De ce fait, certains sous-titres ne devraient plus etre affiches apres 
plusieurs secondes. II faudrait soit creer des reperes avec des noms de repere vides ou 
bien faire appel a la classe Timer( ) pour effacer le texte contenu dans l'instance 1 egende. 

Fichier de reference : Chapitrel2/video6.fla 

import fl .video.*; 

var repl iquesrArray = ["Oh !","Regarde combien j'en ai !", "C'est bien beaucoup !"]; 

// Ajouter des reperes 
ecranVideo.addASCuePoint(2.5,"0"); 
ecranVi deo. addASCuePointt 5, "1" ) ; 
ecranVideo.addASCuePointdO, "2"); 
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//Detecter des reperes 

ecranVideo. add Event Listener (Metadata Event. CUE_P0 1 NT, repereAtteint) ; 

function repereAtteint(evt:MetadataEvent) { 

legende.text = repliques[evt. info. name] ; 
} 



Encoder une video au format FLV 

Pour encoder une video au format FLV, vous pouvez utiliser de nombreuses solutions 
logicielles, mais Flash CS3 est livre avec Flash CS3 Video Encoder. 



Figure 12-6 

L' application Flash Video Encoder 
permet de generer desfichiers 
au format FLV (Flash Video). 




II s'agit d'un logiciel a part que nous vous conseillons d'utiliser si vous ne pouvez pas 
acheter un logiciel dedie tel que Sorenson Squeeze ou On2 Flix. 

Son fonctionnement est assez simple car les prereglages proposes sont plutot en phase 
avec les contraintes du marche. 

1. Lancezle logiciel qui setrouve dans le dossier Adobe Flash CS3 Video Encoder, lui-meme 
dans le dossier d' installation de Flash. 

2. Faites glisser une ou plusieurs videos au centre de la fenetre principale. 

3. Selectionnez une ou plusieurs lignes qui representent les videos que vous vous appretez 
a encoder et cliquez sur le bouton Parametres. 



Pour tommencer It cadage, faites glisser les fkhiers video vers la Hie d'atlent* au cliquez suit Ajcuiler. 



Fichier suur« 

I Users/ dandlardiYtau /Qe 5 ktop/Luna.dv 



V I'.i-'ii'lr.. ■ 

Flash fi - Qualite mayenn* HQQ Kbits/! 



Etjt 

En attenU 



Ajouter.. 



Oupliquer 



Sup primer 



Para me* res.. 



Figure 12-7 

Un simple glisser-deposer suffit a ajouter unfichier a encoder dans le logiciel Flash CS3 Video Encoder. 
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4. Vous pouvez a present utiliser les reglages automatiques ou proceder a des reglages 
manuels a travers les cinq onglets presents dans l'interface. Si vous n'avez pas de 
connaissances particulieres dans le domaine de la video, nous vous conseillons de 
selectionner un profil et de ne pas toucher les parametres video et audio proposes 
dans les onglets eponymes. 

5. Precisez un nom de fichier d' export. Dans le cas contraire, le document cree portera 
le meme prefixe que votre video qui n'est pas encore encodee. 

6. Validez cet ecran en cliquant sur le bouton OK. Vous retrouvez alors la fenetre de 
depart, a partir de laquelle vous devez lancer la file d'attente. 

L'onglet Points de repere ne vous sert a rien dans la mesure ou vous savez maintenant 
ajouter dynamiquement des reperes. En revanche, redimensionnez ou recadrez eventuel- 
lement votre video a partir du dernier onglet de la barre. 




T 



Profile Video Audio Points de repere ftecadrer el red linens ion r>er ' 



VtulNez sd'ectionfierun profil decodage pour Its videos Flash 



Flash S - Qualite movenne I40Q Kbits ,'sh 



^l 



t 



Video codec pour une leceure i I'aide de Flash PI ayer fi ou ulteneur 

Video OfiS VP60n2 VPS 

Audio MPEC Uver III <mf jiMPCC l«er II! (MPJt Isteteo! 



Mom du fichier d* solle : 



( Annuler ) ( OK ) 

Figure 12-8 

Vous pouvez acceder aux differents panneaux de configuration pour Vencodage d'une video en cliquant 
sur les differents onglets situes au milieu de la fenetre. 



Meme si Flash est capable d'encoder une video lorsque vous l'importez dans l'interface, 
nous vous deconseillons cette pratique. Vous bloqueriez alors TIDE de Flash et vous ne 
pourriez done plus agir sur l'interface. 
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Vous etes a present capable de gerer une video dans une animation, non plus comme un 
simple media, pour lequel vous proposez une lecture, mais comme un media interactif. 



Remarque 

Un de mes ouvrages, La video dans Flash (Editions Eyrolles) utilise I'ActionScript 2.0. De ce fait, seule la 
moitie du livre est utile, notamment sur les bases de la video et son encodage. De nombreuses animations 
vous sont proposees en AS2, mais elles constituent neanmoins des solutions utiles aux besoins de 
gestion de video interactive. Seule la syntaxe des scripts n'est plus d'actualite. 



Charger et controler des donnees (texte et PHP) 

Lorsque vous devrez placer des donnees de type texte sur la scene de vos animations, 
trois solutions s'offriront a vous : 

• Creer et charger un fichier XML. 

• Creer et charger un fichier texte. 

• Creer des bases de donnees et des pages dynamiques (par exemple de type PHP) dans 
le but de leur envoyer des requetes. 

Le chapitre 13 traite de la creation et de la manipulation d'un document XML. Nous ne 
developperons done aucun propos supplementaire dans ce chapitre a ce sujet. 

L' utilisation d'un fichier texte est analogue a l'appel a une base de donnees. Essayons 
done de comprendre le mecanisme de ce type de chargement. 

Quel que soit le fichier ou la source que vous chargerez dans une animation, vous devez 
toujours garder a l'esprit la structure et l'organisation des donnees auxquelles s'attend 
Flash. 

Structure des donnees 

En programmation, les variables servent a contenir des donnees. Nous allons done utiliser la 
meme syntaxe pour creer un fichier texte ou concevoir une page Web dynamique. Pour 
separer plusieurs variables, nous utiliserons l'esperluette (&, encore appele « et commer- 
cial »). 

Pour ce premier exemple ecrivez la ligne ci-dessous dans un fichier texte. 

prenom=David&nom=TARDIVEAU&age=37&profession=Enseignant 

Enregistrez ensuite ce document au format UTF-8 afin d' encoder correctement les 
donnees qu'il contient (nommez-le, par exemple, donnees.txt). 



Les variables de type texte 

Comme vous I'aurez peut-etre remarque, les donnees de type texte des variables contenues dans un tel 
fichier ne sont pas saisies entre guillemets. 
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Celles et ceux qui connaissent le PHP auront compris que nous cherchons a generer 
l'affichage de donnees sous ce format-la. Si vous avez deja travaille avec des bases 
MySQL, toutes ces explications vous sembleront basiques. 



Remarque 

Si vous ne connaissez pas le PHP, n'essayez pas de charger des pages PHP qui se trouveraient sur votre 
ordinateur, dans le meme dossier que votre animation Flash. II est necessaire de les deposer sur un 
serveur afin qu'elles puissent etre interpreters. 



Les deux fichiers PHP que nous allons vous presenter dans quelques instants ne font pas 
appel a une base de donnees, mais ils simulent le resultat de 1' interrogation d'une base. Si 
vous etes neophyte en langage PHP, placez simplement ces deux documents sur le 
serveur qui heberge votre site pour effectuer les essais lies aux exemples abordes dans ce 
chapitre. Vous pouvez aussi utiliser l'adresse a laquelle nous faisons reference. 

Fichier de reference : Chapitrel2/requete.php 

|<?php 
echo " prenom=Da vi d&nom=TARDIVEAU&ad res semail=da vid@yazo.net" ; 
?> 

Comme vous pouvez le constater, que nous interrogions une base de donnees ou que 
nous executions de simples commandes echo, le resultat sera le meme. 

Fichier de reference : Chapitrel2/requete2.php 

<?php 

switch (Sprenom) { 
case "david": 

echo "prenom=David&nom=TARDIVEAU&adressemail=da vid@yazo.net" ; 

break; 
case "olivier": 

echo "prenom=01 ivier&nom=MARTIN&adressemail=ol ivier@gmail .com" ; 

break; 
case "fabienne": 

echo "prenom=Fabienne&nom=Gervasoni&adressemail=fabienne@gmail .com" ; 

break; 
} 
?> 

Nous allons devoir envoyer des donnees a une page dynamique. Pour cela, nous utiliserons 
le systeme de branchement de conditions pour eviter de passer par une base de donnees 
MySQL. 



Remarque 

Pour vous assurer du bon fonctionnement de la page PHP que vous avez congue, placez-la sur un serveur 
et interrogez-la en saisissant I'URL ou elle se trouve. Pour passer les variables dans I'URL, utilisez le point 
d'interrogation conventionnel. 
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http://www.yazo.net/racine/Tests/requete.php 
http://www.yazo.net/racine/Tests/requete2.php?prenom=01 i vier 
http://www.yazo.net/racine/Tests/requete2.php7prenoriFDavid 
http://www.yazo.net/racine/Tests/requete2.php7prenoriFFabienne 

Etablir une connexion avec une page dynamique ou de type texte 

Vous allez constater que la procedure pour etablir une connexion n'est pas plus compli- 
quee que celle pour charger des images sur la scene d'une animation. 

1. Instanciez la classe URLLoadert ) qui va contenir les donnees que nous allons charger. 

var chargeurDonnees:URLLoader = new URLLoaderO; 

2. Instanciez la classe URLRequest( ) en precisant entre parentheses l'adresse du fichier a 
charger. 

URLRequestC'http:/ /www. yazo.net/racine/Tests/requete.php" ) ; 



Remarque 

Si vous ne disposez pas d'un fichier texte ou d'une page PHP sur un serveur que vous pourriez charger, 
utilisez l'adresse que nous mentionnons. 



3. Chargez les donnees contenues dans le fichier que vous avez indique dans 1' instance 
de la classe URLLoaderO. 

chargeur Donnees. load (ad res seDonnees) ; 

Ces trois lignes vont maintenant nous permettre d' avoir acces aux variables contenues dans le 
fichier requete.php. Avant d'essayer de les lire, nous devons nous assurer qu'elles ont 
bien ete chargees, c'est pourquoi nous devons faire appel a un gestionnaire d'evenement. 

Verifier la fin d'un chargement 

Si vous ne souhaitez pas effectuer cette verification, vous prenez le risque d'essayer de 
lire des donnees qui ne se trouvent pas encore dans la memoire vive de votre ordinateur. 
L'evenement Event. COMPLETE auquel nous allons faire appel nous permet d'informer le 
programme de la fin du chargement des donnees. C'est dans la fonction de rappel, associee 
a l'ecouteur que nous allons creer, que nous devons placer les lignes d' instructions chargees 
de lire les variables contenues dans le fichier requete.php. 

cha rgeur Donnees. addEvent Listener (Event. COMPLETE, donneesChargees) ; 

function donneesChargees(event:Event) :void ( 

t race ( cha rgeurDonnees. data) ; 
} 
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La fonction addEventListenerO est a associer avec l'instance de la classe URLLoaderO et 
non URLRequest( ). Cette derniere contient bien l'adresse du fichier a charger, mais c'est dans 
l'instance chargeurDonnees que nous chargeons les variables. 

Dans cet exemple, nous affichons l'ensemble des donnees contenues dans le fichier 
requete.php, en faisant reference a la propriete data de l'instance chargeurDonnees, mais 
nous ne pouvons pas encore lire individuellement chaque variable. Nous allons apprendre 
a le faire dans le prochain developpement. 

Vous devriez obtenir un script global tel que celui-ci. 

Fichier de reference : Chapitrel2/url l_oaderl.fi a 

var chargeurDonnees:URLLoader = new URLLoaderO; 

var adresseDonnees:URLRequest = new URLRequest("http://www. yazo.net/racine/ 

•••Tests/requete.php" ) ; 

chargeur Donnees. load (ad res seDonnees) ; 

chargeurDonnees. add Event Listener (Event. COMPLETE, donneesChargees) ; 

function donneesChargeestevent: Event) :void { 
trace (chargeur Donnees. data) ; 

} 

prenom=David&nom=TARDIVEAU&adressemail =da vid@yazo.net 

Manipuler les variables contenues dans une instance de type URLLoaderO 

Fichier de reference : Chapitrel2/urlLoader2.fla 

Lorsque vous chargerez des donnees contenues dans un fichier sous la forme nomVaria- 
ble=12&nomVariable2=13&nomVariable3=14 vous aurez alors besoin de pouvoir lire la valeur 
d'une variable independamment des autres. Nous devons done placer le chargement contenu 
dans l'instance de la classe URLLoaderO dans une instance de la classe URLVariablesO. 

var serieVariables : URLVari abl es = new URLVariables(chargeurDonnees.data) ; 

Comme nous le precisions dans le developpement precedent, vous ne devez pas essayer 
d'acceder a des donnees qui ne sont pas encore chargees. Vous devez done placer cette ligne 
d'instruction dans la fonction de rappel d'un ecouteur gerant l'evenement Event . COMPLETE. 

I function donneesChargeestevent: Event) :void { 
var serieVariables:URLVariables = new URLVariables(chargeurDonnees.data) ; 
» 
En reprenant 1' exemple precedent du chargement des donnees dans une instance de la 
classe URLLoaderO, vous devriez obtenir le script global suivant : 

var chargeurDonnees:URLLoader = new URLLoaderO; 

var adresseDonnees :URLRequest = new URLRequest("http://www. yazo.net/racine/Tests/ 

^••requete.php") ; 



ActionScript 3 - Programmation sequentielle et orientee objet 



chargeurDonnees.load(adresseDonnees) ; 

chargeurDonnees.addEvent Listener (Event. COMPLETE, donneesChargees) ; 

function donneesChargees(event:Event) :void ( 

var serieVariables:URLVariables = new URLVariables(chargeurDonnees.data) ; 

trace(serieVariables.prenom) ; 

trace(serieVariables.nom) ; 

trace(serieVariables.adressemail ) ; 
} 

David 
TARDIVEAU 
david@yazo.net 




Envoyer des variables a une URL 

Pour pouvoir interroger une base de donnees, vous devrez generalement specifier la valeur 
de certaines variables a passer a l'URL que vous utilisez pour charger des donnees. La 
classe URLVari ablest) que nous allons utiliser sert aussi bien a contenir des variables a 
charger qu' a envoyer. Dans le cas ou vous devez lire l'ensemble des variables recues lors 
d'un chargement, nous avons vu, dans le developpement precedent, qu'il faut utiliser la 
propriete data. En revanche, pour enregistrer des variables, il suffit simplement de les 
mentionner en tant que propriete de l'instance de type URLVari abl es. 



Remarque 

Nous nous appretonsa utiliser la classe URLVari abl es(). Nous vous invitonsdonc a prendre connais- 
sance (si vous ne I'avez pas deja fait) du contenu de la page precedente dediee a la manipulation des 
variables contenues dans une instance de type URLLoader( ). 



1. Instanciez la classe URLVariablesO. 

var variablesURL:URLVariables = new URLVariablesO; 

2. Ajoutez autant de variables que necessaire. 

variablesURL.prenom="david" ; 

3. Injectez l'ensemble des variables dans l'instance de type URLRequestO a l'aide de la 
propriete data. 

adresseDonnees.data = variablesURL; 

4. Chargez cette adresse a l'aide de la methode 1 oad( ). 

chargeur Donnees. load (ad res seDonnees) ; 

II ne reste plus qu'a receptionner les variables en retour de la requete. En reprenant 
l'exemple precedent du chargement des donnees dans une instance de la classe URLLoader( ), 
vous devriez obtenir le script global suivant : 
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Fichier de reference : Chapitrel2/urll_oader3.fla 

var variablesURL:URLVariables = new URLVariables( ) ; 
variablesURL.prenom="david" ; 

var chargeurDonnees:LIRLLoader = new URLLoadert ) ; 

var adresseDonnees:URLRequest = new URLRequest("http://www. yazo.net/racine/ 

**Tests/requete2.php") ; 

adresseDonnees.data = variablesURL; 
chargeurDonnees.load(adresseDonnees) ; 

chargeurDonnees. add Event Listener (Event. COMPLETE, donneesChargees) ; 

function donneesChargeestevent: Event) :void { 
trace (chargeurDonnees. data) ; 

} 

prenom=David&nom=TARDIVEAU&adressemail =da vid@yazo.net 



Envoyer et recevoir des variables d'une URL 

En nous basant sur les trois developpements precedents, nous avons realise un dernier 
exemple qui presente l'envoi de variables a une URL avant d'en receptionner d'autres. 

Fichier de reference : Chapitrel2/urlLoader4.fla 

var variablesURL:URLVariables = new URLVariables( ) ; 

variablesURL.prenom="david" ; 

var variablesChargees:URLVariables ; 

var chargeurDonnees:LIRLLoader = new URLLoadert); 

var adresseDonnees:URLRequest = new URLRequest("http://www. yazo.net/racine/ 

*»Tests/requete2.php" ) ; 

adresseDonnees.data = variablesURL; 
chargeurDonnees. load (ad res seDonnees) ; 

chargeurDonnees. add Event Listener (Event. COMPLETE, donneesChargees) ; 

function donneesChargeestevent: Event) :void { 

variablesChargees = new URLVariables(chargeurDonnees.data) ; 

trace(variablesChargees.prenom) ; 

trace(variablesChargees.nom) ; 

t r ace ( variablesChargees. ad res semail ) ; 

} 

David 

TARDIVEAU 

david@yazo.net 

Pour conclure ces explications sur le chargement et l'envoi de donnees a un serveur, nous 
pouvons dire que ce script constitue la base de tous ceux que vous serez amene a conce- 
voir pour echanger des donnees entre une animation Flash et une base de donnees ou une 
page Web dynamique. 




13 



Gerer le XML 
dans Flash 



Si le formalisme XML n'existait pas ou bien s'il etait impossible de l'utiliser dans Flash, 
les developpements ne seraient pas ce qu'ils sont aujourd'hui ! 

Pourquoi une telle affirmation ? 

Dans une animation, nous avons sans cesse besoin de faire appel a des informations et 
nous devons, de ce fait, les organiser et les manipuler. Structurer l'information en la 
hierarchisant permet de consulter rapidement et simplement une donnee. Le formalisme 
XML est done la solution la plus adaptee pour concevoir des documents bien ordonnes. 

Pour vous expliquer le fonctionnement du XML, nous avons exploite plusieurs docu- 
ments presentant chacun leur propre hierarchie de l'information. Nous avons ainsi cree 
quatre fichiers XML contenant des lignes de code avec les 22 regions de France. 

Nous n' avons pas souhaite utiliser un seul document XML complet vous presentant tous 
les cas de figures que nous allons evoquer, car nous estimons que 1' arborescence XML 
obtenue aurait ete trap complexe pour les premieres explications. Nous avons done concu 
des exemples de difficulte progressive d'un fichier a 1' autre. 

Le dernier document XML que nous avons redige pourra servir de base de travail a vos 
propres exercices pratiques, des que vous aurez assimile les notions presentees. C'est 
pourquoi, il est un peu long et plus complexe. Vous pourrez ainsi imaginer plusieurs cas 
de figures. 
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Creer une source XML 

Si la redaction d'un document XML n'est pas tres complexe, sa conception Test tout de 
meme un peu. En effet, on ne peut pas se lancer dans l'ecriture d'un fichier XML sans 
analyser prealablement l'organisation de son contenu. 

Premiere etape 

La creation d'un document XML debute par une phase de reflexion au cours de laquelle 
vous devez recenser les informations devant figurer dans le fichier XML. II faut ensuite 
regrouper et hierarchiser les donnees recoltees pour obtenir une arborescence qu'il est 
ensuite facile de retranscrire sous forme d'une structure XML. 

Exemple : nous souhaitons utiliser les noms des 22 regions de France (Chapitrel3/ 
franceregions.xml, Chapi trel3/franceregions2.xml et Chapitrel3/franceregions3.xml), 
ainsi que ceux des departements associes (Chapitrel3/france.xml). Voici l'organisation 
des donnees que nous avons choisie : 



Remarque 

Dans le fichier f ranee. xml vous allez constater que nous avons decide de regrouper les departements 
frangais par region. Mais, nous aurions tout autant pu rediger une liste des departements pour lesquels 
nous aurions indique une region de rattachement en tant qu'attribut. Dans ce dernier cas, une repetition 
inutile du nom des regions aurait ete ineluctable. 



Fichier franceregions .xml : 

<France> 

<Region nom="Alsace"/> 

<Region nom="Aquitaine"/> 

<Region nom="Auvergne"/> 

< Reg ion nom="Basse-Normanclie"/> 

<Region nom="Bourgogne"/> 

<Region nom="Bretagne"/> 

<Region nom="Centre"/> 

< Reg ion nom=" Champa gne-Ardenne"/> 

<Region nom="Corse"/> 

<Region nom="Franche-Comte"/> 

<Region nom=" Haute- No rmandie"/> 

<Region nom="Ile-de-France"/> 

< Reg ion nom="Languedoc-Roussillon"/> 

<Region nom="Limousin"/> 

<Region nom="Lorraine"/> 

<Region nom="Midi-Pyrenees"/> 

< Reg ion nom="Nord-Pas-de-Cal a i s " / > 

<Region nom="Pays de la Loire"/> 

<Region nom="Picardie"/> 

< Reg ion nom="Poitou-Cha rentes "/> 

<Region nom="Provence-Alpes-C6te d'azur"/> 

<Region nom="Rhones-Alpes"/> 

</France> 
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Fichier f ranceregions2.xml : 

<France> 

<Region>Alsace</Region> 

<Region>Aquitaine</Region> 

<Region>Auvergne</Region> 

<Region>Basse-Normandie</Region> 

<Region>Bourgogne</Region> 

<Region>Bretagne</Region> 

<Region>Centre</Region> 

<Region>Champagne-Ardenne</Region> 

<Region>Corse</Region> 

<Region>Franche-Comte</Region> 

<Region>Haute-Normandie</Region> 

<Region>Ile-de-France</Region> 

<Region>Languedoc-Roussil lon</Region> 

<Region>l_imousin</Region> 

<Region>Lorraine</Region> 

<Region>Midi -Pyrenees</Region> 

<Region>Nord-Pas-de-Calais</Region> 

<Region>Pays de la Loire</Region> 

<Region>Picardie</Region> 

<Region>Poitou-Cha rentes </Region> 

<Region>Provence-Al pes -Cote d'azur</Region> 

<Region>Rhones-Alpes</Region> 
</France> 

Ces deux fichiers, franceregions.xtnl et franceregions2.xml, contiennent la meme infor- 
mation, c'est-a-dire les noms des 22 regions de France. Nous avons volontairement 
utilise les attributs de noeuds pour stocker les 22 noms dans le fichier franceregions.xml 
alors que dans le fichier franceregions2.xml, ces memes informations ont ete placees en 
tant que valeur de noeud. Rassurez-vous, nous allons tres vite vous expliquer la difference 
entre ces deux techniques. 

Pour vous presenter justement la notion d'attribut, nous avons concu un troisieme docu- 
ment qui contient une information supplementaire, le nom des habitants des differentes 
regions de France. 

Fichier franceregions3.xml (source: http://fr.wikipedia.org): 

<France> 

<Region nomhabitants="Alsaciens & Al saciennes">Alsace</Region> 

<Region nomhabitants="Aquitains & Aquitaines">Aquitaine</Region> 

<Region nomhabitants="Auvergnats & Auvergnates">Auvergne</Region> 

<Region nomhabitants="Bas-Normands & Bas-Normandes">Basse-Normandie</Region> 

<Region nomhabitants="Bourguignons & Bourguignonnes">Bourgogne</Region> 

<Region nomhabitants="Bretons & Bretonnes">Bretagne</Region> 

<Region nomhabitants="Les habitants de la region Centre ! ">Centre</Region> 

<Region nomhabitants="Champardennais & Champardennaises">Champagne-Ardenne</Region> 

<Region nomhabitants="Corses & Corses">Corse</Region> 

<Region nomhabitants="Francs-Comtois & Francs-Comtoises">Franche-Comte</Region> 
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<Region nomhabi 
<Region nomhabi 
<Region nomhabi 
^Languedoc-Rou 
<Region nomhabi 
<Region nomhabi 
<Region nomhabi 
**Midi -Pyrenees 
<Region nomhabi 
*-Nord-Pas-de-C 
<Region nomhabi 
■Pays de la Lo 
<Region nomhabi 
<Region nomhabi 
**</Region> 
<Region nomhabi 
**Provence-Alpe 
<Region nomhabi 
</France> 



tants="Hauts-Normands & Hauts-Normandes">Haute-Normandie</Region> 

tants="Francil iens & Francil iennes">Ile-de-France</Region> 

tants="Langdociens-Roussillonnais & Langdociens-Roussil lonnais"> 

ssil lon</Region> 

tants="Limousins & Limousines">Limousin</Region> 

tants="Lorrains & Lorraines">Lorraine</Region> 

tants="Les habitants de la region Midi-Pyrenees !"> 

</Region> 

tants="Nord-Pas-de-Calaisiens & Nord-Pas-de-Calaisiennes"> 

alais</Region> 

tants="Les habitants de la region Pays de la Loire !"> 

ire</Region> 

tants="Pi cards & Picardes">Picardie</Region> 

tants=" Pi cto-Cha rental's & Pi cto-Charentaises">Poitou-Cha rentes 

tants="Les habitants de la region Provence-Alpes-Cote d'azur !"> 

s-C6te d'azur</Region> 

tants="Rhonalpins & Rh6nalpines">Rhones-Alpes</Region> 



Ce quatrieme document est volontairement long et plus complexe afin que nous puissions 
manipuler une structure qui se prete aux nombreux cas de traitements abordes dans le 
tableau de synthese a la fin de ce chapitre. 

Fichier france.xml (source : www.insee.fr) 

<France> 

<Region nom="Alsace"> 
<Departement nom="Bas-Rhin" numero="67" prefecture="Strasbourg"/> 
<Departement nom="Haut-Rhin" numero="68" prefecture="Colmar"/> 
<Population> 

<Annee numero="1990">l 624 372</Annee> 

<Annee numero="1999">l 734 145</Annee> 

<Annee numero="2005">l 806 069</Annee> 

<Annee numero="2006">l 816 841</Annee> 
</Population> 
</Region> 

<Region nom="Aquitaine"> 
<Departement nom="Dordogne" numero="24" prefecture="Perigueux"/> 
<Departement nom="Gi ronde" numero="33" prefecture="Bordeaux"/> 
<Departement nom="Landes" numero="40" prefecture="Mont-de-Marsan"/> 
<Departement nom="Lot-et-Garonne" numero="47" prefecture="Agen"/> 
<Departement nom="Pyrenees-Atlantiques" numero="64" prefecture="Pau"/> 
<Population> 

<Annee numero="1990">2 795 830</Annee> 

<Annee numero="1999">2 908 359</Annee> 

<Annee numero="2005">3 080 091</Annee> 

<Annee numero="2006">3 098 819</Annee> 
</Population> 
</Region> 
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<Region nom="Auvergne"> 
<Departement nom="Allier" numero="3" prefecture="Moul ins"/> 
<Departement nom="Cantal " numero="15" prefecture="Aurill ac"/> 
<Departement nom="Haute-Loire" numero="43" prefecture="l_e Puy-en-Vel lay"/> 
<Departement nom="Puy-de-D6ine" numero="63" prefecture="Clermont-Ferrand"/> 
<Popul ation> 

<Annee numero="1990">l 321 214</Annee> 

<Annee numero="1999">l 308 878</Annee> 

<Annee numero="2005">l 331 380</Annee> 

<Annee numero="2006">l 333 530</Annee> 
</Population> 
</Region> 

<Region nom="Basse-Normandie"> 
<Departement nom="Cal vados" numero="14" prefecture="Caen"/> 
<Departement nom="Manche" numero="50" prefecture="Saint-L3"/> 
<Departement nom="0rne" numero="61" prefecture="Alengon"/> 
<Popul ation> 

<Annee numero="1990">l 391 318</Annee> 

<Annee numero="1999">l 422 193</Annee> 

<Annee numero="2005">l 445 732</Annee> 

<Annee numero="2006">l 448 857</Annee> 
</Population> 
</Region> 

<Region nom="Bourgogne"> 
<Departement nom="C6te-d'0r" numero="21" prefecture="Di jon"/> 
<Departement nom="Nievre" numero="58" prefecture="Nevers"/> 
<Departement nom="Saone-et-Loire" numero="71" prefecture="Macon"/> 
<Departement nom="Yonne" numero="89" prefecture="Auxerre"/> 
<Popul ation> 

<Annee numero="1990">l 609 653</Annee> 

<Annee numero="1999">l 610 067</Annee> 

<Annee numero="2005">l 622 542</Annee> 

<Annee numero="2006">l 623 913</Annee> 
</Population> 
</Region> 

<Region nom="Bretagne"> 
<Departement nom="C6tes d'Armor" numero="22" prefecture="Saint-Brieuc"/> 
<Departement nom="Finistere" numero="29" prefecture="Quimper"/> 
<Departement nom="Il le-et-Vil aine" numero="35" prefecture="Rennes"/> 
<Departement nom="Morbihan" numero="56" prefecture="Vannes"/> 
<Popul ation> 

<Annee numero="1990">2 795 638</Annee> 

<Annee numero="1999">2 906 197</Annee> 

<Annee numero="2005">3 062 117</Annee> 

<Annee numero="2006">3 080 648</Annee> 
</Population> 
</Region> 
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<Region nom="Centre"> 
<Departement nom="Cher" numero="18" prefecture="Bourges"/> 
<Departement nom="Eure-et-Loir" numero="28" prefecture="Chartres"/> 
<Departement nom="Indre" numero="36" prefecture="Chateauroux"/> 
<Departement non)="Indre-et-Loire" numero="37" prefecture="Tours"/> 
<Departement nom="Loir-et-Cher" numero="41" prefecture="Blois"/> 
<Departement nom="Loiret" numero="45" prefecture="Orleans"/> 
<Population> 

<Annee numero="1990">2 371 036</Annee> 

<Annee numero="1999">2 440 329</Annee> 

<Annee numero="2005">2 496 654</Annee> 

<Annee numero="2006">2 505 288</Annee> 
</Population> 
</Region> 

<Region nom=" Champagne -Ardenne"> 
<Departement nom="Ardennes" numero="8" prefecture="Charlevil le-Mezieres"/> 
<Departement nom="Aube" numero="10" prefecture="Troyes"/> 
<Departement nom="Marne" numero="51" prefecture="Chalons-en-Champagne"/> 
<Departement nom="Haute-Marne" numero="52" prefecture="Chaumont"/> 
<Population> 

<Annee numero="1990">l 347 848</Annee> 

<Annee numero="1999">l 342 363</Annee> 

<Annee numero="2005">l 337 672</Annee> 

<Annee numero="2006">l 338 590</Annee> 
</Population> 
</Region> 



prefecture="Ajaccio"/> 
prefecture="Bastia"/> 



<Region nom="Corse"> 
<Departement nom="Corse-du-Sud" numero="2A' 
<Departement nom="Haute-Corse" numero="2B" 
<Population> 

<Annee numero="1990">250 371</Annee> 

<Annee numero="1999">260 196</Annee> 

<Annee numero="2005">276 911</Annee> 

<Annee numero="2006">278 650</Annee> 
</Population> 
</Region> 

<Region nom="Franche-Comte"> 
<Departement nom="Doubs" numero="25" prefecture="Besancon"/> 
<Departement nom="Jura" numero="39" prefecture="Lons-le-Saunier"/> 
<Departement nom="Haute-Saone" numero="70" prefecture="Vesoul "/> 
<Departement nom="Territoi re-de-Bel fort" numero="90" prefecture="Belfort"/> 
<Population> 

<Annee numero="1990">l 097 276</Annee> 

<Annee numero="1999">l 117 059</Annee> 

<Annee numero="2005">l 141 861</Annee> 

<Annee numero="2006">l 146 139</Annee> 
</Population> 
</Region> 

<Region nom="Haute-Norniandie"> 
<Departement nom="Eure" numero="27" prefecture="Evreux"/> 
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<Departement nom="Seine-Maritime" numero="76" prefecture="Rouen"/> 
<Popul ation> 

<Annee numero="1990">l 737 247</Annee> 

<Annee numero="1999">l 780 192</Annee> 

<Annee numero="2005">l 805 955</Annee> 

<Annee numero="2006">l 811 241</Annee> 
</Population> 
</Region> 

<Region nom="Ile-de-France"> 
<Departement nom="Paris" numero="75" prefecture="Paris"/> 
<Departement nom="Seine-et-Marne" numero="77" prefecture="Mel un"/> 
<Departement nom="Yvel ines" numero="78" prefecture="Versailles"/> 
<Departement nom="Essonne" numero="91" prefecture="F_vry"/> 
<Departement nom="Hauts-de-Seine" numero="92" prefecture="Nanterre"/> 
<Departement nom="Seine-Saint-Denis" numero="93" prefecture="Bobigny"/> 
<Departement nom="Val -de-Marne" numero="94" prefecture="Creteil "/> 
<Departement nom="Val -d'Oise" numero="95" prefecture="Pontoise"/> 
<Popul ation> 

<Annee numero="1990">10 660 554</Annee> 

<Annee numero="1999">10 952 011</Annee> 

<Annee numero="2005">ll 399 319</Annee> 

<Annee numero="2006">ll 491 046</Annee> 
</Population> 
</Region> 

<Region nom="Languedoc- Rous sill on "> 
<Departement nom="Aude" numero="ll" prefecture="Carcassonne"/> 
<Departement nom="Gard" numero="30" prefecture="NTiries"/> 
<Departement nom="Heraul t" numero="34" prefecture="Montpel ier"/> 
<Departement nom="Lozere" numero="48" prefecture="Mende"/> 
<Departement nom="Pyrenees-Orientales" numero="66" prefecture="Perpignan"/> 
<Popul ation> 

<Annee numero="1990">2 114 985</Annee> 

<Annee numero="1999">2 295 648</Annee> 

<Annee numero="2005">2 496 871</Annee> 

<Annee numero="2006">2 519 707</Annee> 
</Population> 
</Region> 

<Region nom="Limousin"> 
<Departement nom="Correze" numero="19" prefecture="Tulle"/> 
<Departement nom="Creuse" numero="23" prefecture="Gueret"/> 
<Departement nom="Haute-Vienne" numero="87" prefecture="Limoges"/> 
<Popul ation> 

<Annee numero="1990">722 850</Annee> 

<Annee numero="1999">710 939</Annee> 

<Annee numero="2005">724 243</Annee> 

<Annee numero="2006">725 301</Annee> 
</Population> 
</Region> 

<Region nom="Lorraine"> 
<Departement nom="Meurthe-et-Mosel le" numero="54" prefecture="Nancy"/> 
<Departement nom="Meuse" numero="55" prefecture="Bar-le-Duc"/> 
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<Departement nom="Mosel le" numero="57" prefecture="Metz"/> 
<Departement nom="Vosges" numero="88" prefecture="Epinal "/> 
<Population> 

<Annee numero="1990">2 305 726</Annee> 

<Annee numero="1999">2 310 376</Annee> 

<Annee numero="2005">2 334 245</Annee> 

<Annee numero="2006">2 338 744</Annee> 
</Population> 
</Region> 

<Region nom="Midi -Pyrenees") 
<Departement nom="Ariege" numero="9" prefecture="Foix"/> 
<Departement nom="Aveyron" numero="12" prefecture="Rodez"/> 
<Departement nom="Haute-Garonne" numero="31" prefecture="Toulouse"/> 
<Departement nom="Gers" numero="32" prefecture="Auch"/> 
<Departement nom="Lot" numero="46" prefecture="Cahors"/> 
<Departement nom="Hautes-Pyrenees" numero="65" prefecture="Tarbes"/> 
<Departement nom="Tarn" numero="81" prefecture="Albi "/> 
<Departement nom="Tarn-et-Garonne" numero="82" prefecture="Montauban"/> 
<Population> 

<Annee numero="1990">2 430 663</Annee> 

<Annee numero="1999">2 551 687</Annee> 

<Annee numero="2005">2 734 954</Annee> 

<Annee numero="2006">2 755 383</Annee> 
</Population> 
</Region> 

<Region nom="Nord-Pas-de-Calais"> 
<Departement nom="Nord" numero="59" prefecture="Lil le"/> 
<Departement nom="Pas-de-Cal ais" numero="62" prefecture="Arras"/> 
<Population> 

<Annee numero="1990">3 965 058</Annee> 

<Annee numero="1999">3 996 588</Annee> 

<Annee numero="2005">4 032 135</Annee> 

<Annee numero="2006">4 043 050</Annee> 
</Population> 
</Region> 

<Region nom="Pays de la Loire"> 
<Departement nom="Loire-Atlantique" numero="44" prefecture="Nantes"/> 
<Departement nom="Maine-et-Loire" numero="49" prefecture="Angers"/> 
<Departement nom="Mayenne" numero="53" prefecture="l_aval "/> 
<Departement nom="Sarthe" numero="72" prefecture="l_e Mans"/> 
<Departement nom="Vendee" numero="85" prefecture="l_a Roche-sur-Yon"/> 
<Population> 

<Annee numero="1990">3 059 112</Annee> 

<Annee numero="1999">3 222 061</Annee> 

<Annee numero="2005">3 400 745</Annee> 

<Annee numero="2006">3 426 371</Annee> 
</Population> 
</Region> 

<Region nom="Picardie"> 
<Departement nom="Aisne" numero="2" prefecture="Laon"/> 
<Departement nom="0ise" numero="60" prefecture="Beauvais"/> 
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<Departement nom="Somme" nuiTiero="80" prefecture="Amiens"/> 
<Popul ation> 

<Annee numero="1990">l 810 687</Annee> 

<Annee numero="1999">l 857 481</Annee> 

<Annee numero="2005">l 880 890</Annee> 

<Annee numero="2006">l 886 445</Annee> 
</Population> 
</Region> 

<Region nom="Poitou-Cha rentes "> 
<Departement nom="Charente" numero="16" prefecture="Angouleme"/> 
<Departement nom="Charente-Maritime" numero="17" prefecture="La Rochelle"/> 
<Departement nom="Deux-Sevres" numero="79" prefecture="Niort"/> 
<Departement nom="Vienne" numero="86" prefecture="Poitiers"/> 
<Popul ation> 

<Annee numero="1990">l 595 109</Annee> 

<Annee numero="1999">l 640 068</Annee> 

<Annee numero="2005">l 705 347</Annee> 

<Annee numero="2006">l 712 652</Annee> 
</Population> 
</Region> 

<Region nom="Provence-Alpes-C6te d'azur"> 
<Departement nom="Alpes de Hautes-Provence" numero="4" prefecture="Digne"/> 
<Departement nom="Hautes-Alpes" numero="5" prefecture="Gap"/> 
<Departement nom="Alpes-Maritimes" numero="6" prefecture="Nice"/> 
<Departement nom="Bouches-du-Rhone" numero="13" prefecture="Marseil le"/> 
<Departement nom="Var" numero="83" prefecture="Toiilon"/> 
<Departement nom="Vaucluse" numero="84" prefecture="Avignon"/> 
<Popul ation> 

<Annee numero="1990">4 257 907</Annee> 

<Annee numero="1999">4 506 151</Annee> 

<Annee numero="2005">4 750 947</Annee> 

<Annee numero="2006">4 780 989</Annee> 
</Population> 
</Region> 

<Region nom="Rhones-Al pes"> 
<Departement nom="Ain" numero="l" prefecture="Bourg-en-Bresse"/> 
<Departement nom="Ardeche" numero="7" prefecture="Privas"/> 
<Departement nom="Dr6me" numero="26" prefecture="Valence"/> 
<Departement nom="Isere" numero="38" prefecture="Grenoble"/> 
<Departement nom="Loire" numero="42" prefecture="Saint-Etienne"/> 
<Departement nom="Rhone" numero="69" prefecture="Lyon"/> 
<Departement nom="Savoie" numero="73" prefecture="Chambery"/> 
<Departement nom="Haute-Savoie" numero="74" prefecture="Annecy"/> 
<Popul ation> 

<Annee numero="1990">5 350 701</Annee> 

<Annee numero="1999">5 645 407</Annee> 

<Annee numero="2005">5 958 320</Annee> 

<Annee numero="2006">6 004 957</Annee> 
</Population> 
</Region> 

</France> 
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Nous sommes bien conscients que ces quatre documents XML ne signifient rien pour 
vous, mais nous allons devoir nous y referer tres souvent. Nous les avons done presentes 
ici, arm que vous puissiez venir les consulter des que nous les evoquerons dans nos expli- 
cations et nos exemples. D'autres fichiers XML sont egalement utilises au travers des 
differents exemples de ce chapitre ; nous les presenterons au cas par cas. 



Deuxieme etape 



Elle consiste a retranscrire le resultat de 1' analyse de la premiere etape sous forme de 
balises XML. 

Dans un premier temps, si nous faisions abstraction de la notion d'attribut, il suffirait 
d'ecrire un document texte sous forme de table des matieres ou de plan (tel qu'il est 
propose dans Microsoft Word) auquel il ne resterait plus qu'a ajouter au debut et a la fin 
des lignes du document les balises XML. 

Dans les paragraphes qui vont suivre, nous allons analyser la structure d'un document XML 
et vous constaterez qu'il existe des noeuds et des attributs. Lorsque vous aurez compris la 
difference entre ces deux notions, vous vous demanderez si vous devez privilegier l'usage 
des attributs ou des nceuds. II n'y a pas vraiment de reponse a cette question, tout depend 
de votre preference, mais gardez tout de meme a 1' esprit qu'il est plus pratique de saisir 
une information assez longue en tant que valeur de nceud plutot qu'une valeur d'attribut. 



Remarque 

Dans les faits, la premiere etape est souvent realisee de tete ou a I'aide d'un simple schema sur une feuille 
de papier. 



Creer un fichier 



Commencez par lancer un editeur de texte, celui qui vous convient le mieux. II n'y a pas 
de meilleur logiciel que celui que vous utilisez deja. Tant que ce dernier gere le format 
Unicode, n'en changez pas. 

Pour celles et ceux qui n'ont jamais utilise d'editeur de texte ou de code, sachez que 
Dreamweaver est capable de generer des fichiers XML et de travailler avec, mais que 
vous pouvez egalement trouver sur Internet des freewares et sharewares et en choisir un 
en fonction des interfaces qui vous semblent plus familieres. II est tres difficile de vous 
conseiller un logiciel sous Windows tant le choix est grand. Sur Mac, il en existe egale- 
ment quelques-uns, mais le choix se restreint tres vite a une poignee de logiciels vraiment 
efficaces. TextWrangler a le merite d'etre gratuit, tres simple a prendre en main et de 
proposer la coloration syntaxique. 



Coloration syntaxique 

Pour faciliter la redaction et la lecture des documents contenant du code informatique, certains editeurs de 
texte mettent en couleur les mots importants des langages de programmation. C'est ce qu'on appelle la 
coloration syntaxique. 
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1. Creez un nouveau document. 



2. Enregistrez-le avec un nom representatif des informations qu'il contient. Rappelons 
que vous ne devez pas utiliser de caracteres accentues ou speciaux. II est capital que 
vous choisissiez le format Unicode ou UTF-8 pour l'enregistrement de votre docu- 
ment, afin que tous les caracteres saisis dans le fichier soient reconnus par Flash. 

3. Saisissez votre code XML (consultez le developpement suivant, Structure elementaire 
d'un fichier XML). 

4. Effectuez un dernier enregistrement de votre document. 

5. Faites glisser votre document dans la fenetre d'un navigateur pour vous assurer qu'il 
est valide. 

Cette derniere etape vous permet de verifier si votre document contient des erreurs avant 
que Flash ne vous le signale dans la fenetre Sortie. Le code d'erreur et l'information affi- 
ches par Flash ne sont pas toujours tres parlants compares au message signale par un 
navigateur. 

Structure elementaire d'un fichier XML 

Elle repose sur l'imbrication de noeuds intitules, de ce fait, des nceuds enfants. La structure 
d'un fichier XML peut varier considerablement pour un meme resultat, tout depend des 
habitudes et de l'experience de chacun. 

La balise 

Comme nous l'avons evoque a plusieurs reprises, il est necessaire de structurer l'infor- 
mation afin qu'elle soit plus facilement accessible et surtout plus risible. Cette structuration 
pourrait se traduire visuellement sous plusieurs formes de presentations. Selon vous, 
quelle est la solution la plus exploitable pour un traitement de 1'information : une liste ou 
un tableau ? 

Sous forme de liste : 

Alsace, Aquitaine, Auvergne, Basse-Normandie, Bourgogne, Bretagne, Centre, Champagne - 
Ardenne, Corse, Franche-Comte, Haute -Normandie, Ile-de-France, Languedoc-Roussillon, 
Limousin, Lorraine, Midi-Pyrenees, Nord-Pas-de -Calais, Pays de la Loire, Picardie, 
Poitou-Charentes, Provence- Alpes-Cote d'azur, PJiones-Alpes. 

Sous forme de tableau : 



1 1 


Alsace 


2 


Aquitaine 


I 3 


Auvergne 


4 


Basse-Normandie 


5 


Bourgogne 


6 


Bretagne 
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7 


Centre 


8 


Champagne-Ardenne 


9 


Corse 


10 


Franche-Comte 


11 


Haute-Normandie 


12 


lle-de-France 


13 


Languedoc-Roussillon 


14 


Limousin 


15 


Lorraine 


16 


Midi-Pyrenees 


17 


Nord-Pas-de-Calais 


18 


Pays de la Loire 


19 


Picardie 


20 


Poitou-Charentes 


21 


Provence-Alpes-Cote d'azur 


22 


Rhones-Alpes 



II est plus simple de faire reference a la dixieme ligne du tableau plutot qu'au dixieme 
mot de la liste (meme si la numerotation des lignes n'etait pas presente, il est plus 
facile de compter des lignes que de chercher des virgules dans une liste pour compter 
des mots). 

Gardons ce type de presentation pour vous expliquer la structure d'un document XML. 

Le tableau que nous venons de realiser ne possede pas de titre, ce qui peut s'averer 
ambigu sur la representation et la signification des donnees qu'il contient. Nous devons 
done en ajouter un et choisir par exemple : Les 22 regions de France. Plus generalement, 
si nous avions a realiser plusieurs tableaux presentant les differentes regions de plusieurs 
pays nous pourrions simplifier le titre par France. 

Depuis votre plus tendre enfance ou votre adolescence, vous avez appris a lire un tableau. 
A chaque nouvelle ligne, une nouvelle information est stockee. Le mot Normandie se 
trouve a la suite du terme Basse car e'est un nom compose. En revanche, Bretagne se 
trouve sur la ligne qui suit celle contenant Bourgogne. Nous n'aurions pas pu saisir Bour- 
gogne -Bretagne. Toutes ces affirmations vous paraissent surement absurdes, mais dans 
ce cas, e'est que vous connaissez bien la geographie francaise. Si nous ecrivions les noms 
des regions d'un pays que vous ne connaissez pas, les lignes du tableau joueraient dans 
ce cas un role capitale de separation de l'information. 

Une ligne de tableau se trouve sur un axe horizontal qui debute par un trait vertical et se 
termine par un autre. 



21 



Provence-Alpes-Cote d'azur 
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Pour concevoir un document XML, vous devez done imaginer les informations que vous 
souhaitez stacker sous forme de tableau. Vous remplacerez alors les limites des lignes par 
des balises. 

<Region>Provence-Al pes -Cote d'azur</Region> 

Observez bien la difference entre la balise d'ouverture et celle qui termine la ligne. La 
derniere debute par une barre oblique (slash) pour indiquer qu'elle ferme la premiere. 

Mais qu'est-ce qu'une balise ? Vous l'aurez peut-etre compris, il s'agit d'un systeme de 
marquage qui delimite le debut et la fin d'une information. Grace aux balises, nous 
pouvons separer hierarchiquement plusieurs informations. 

Pourquoi cette separation est-elle hierarchique ? Dans la mesure ou il est possible d'imbriquer 
les balises les unes a l'interieur des autres, vous allez generer tout naturellement une 
arborescence. 

<Region> 

<Departement>Correze</Departement> 

<Departement>Creuse</Departement> 

<Departement>Haute-Vienne</Departement> 

</Region> 



Remarque 

Le nom d'une balise ne doit pas comporter de caracteres accentues ni meme de caracteres speciaux ou 
d'espace. 



Dans notre dernier exemple, nous possedons un document XML avec un nceud racine 
dont le nom de balise est Region. 

La balise autofermante 

Parfois, l'information contenue entre deux balises est presque plus courte que le nom des 
balises elles-memes. II est alors interessant d'utiliser des balises autofermantes accompa- 
gnees d'un attribut (nous aborderons cette notion, l'attribut, dans quelques pages). 

<Region> 

<Departement nom="Correze'7> 

<Departement nom="Creuse"/> 

<Departement nom="Haute-Vienne"/> 

</Region> 

En conclusion 

Vous devez toujours garder a l'esprit qu'une balise est un marqueur. De ce fait, elles 
fonctionnent par paire (a l'exception des balises autofermantes), une qui ouvre et l'autre 
qui ferme le nceud. 

Les termes fermer ou ouvrir une balise ou un nceud signifient respectivement inserer une 
balise avec ou sans barre oblique (slash). 
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Le noeud 

Pour expliquer clairement et simplement ce qu'est un noeud, rien ne vaut un exemple. 

Nous sommes partis du fichier France.xml et nous l'avons modifie afin qu'il soit plus 
facile a manipuler. 

Le premier noeud de cette arborescence possede le nom France. II s'agit precisement du 
noeud racine. Ce dernier est qualifie ainsi car il contient tous les noeuds du document. 
Lorsque nous parlons du premier noeud d'un document XML, nous faisons toujours refe- 
rence au premier noeud qui se trouve dans le noeud racine. Dans notre exemple, le premier 
noeud est done celui de 1' Alsace. 

Le noeud racine possede cinq noeuds enfants dont les noms de balises sont Regi on. 

Le premier noeud possede deux noeuds enfants dont les noms de balises sont Departement. 
Le deuxieme noeud possede cinq noeuds enfants. 

Le cinquieme noeud de cette arborescence possede cinq noeuds enfants. Le cinquieme 
noeud enfant possede a son tour quatre noeuds enfants dont les noms de balises sont Annee. 

<France> 

<Region nom="Alsace"> 
<Departement nom="Bas-Rhin" numero="67">Strasbourg</Departement> 
<Departement nom="Haut-Rhin" numero="68">Colmar</Departement> 

</Region> 

<Region nom="Aquitaine"> 

<Departement nom="Dordogne" numero="24">Perigueux</Departement> 

<Departement nom="Gi ronde" numero="33">Bordeaux</Departenient> 

<Departement nom="Landes" numero= "40 ">Mont -de-Ma rsan</Departement> 

<Departement nom="Lot-et-Garonne" numero="47">Agen</Departement> 

<Departement nom= " Pyrenees- At 1 antiques" numero="64">Pau</Departement> 

</Region> 

<Region nom="Auvergne"> 
<Departement nom="All ier" numero="3">Moul ins</Departement> 
<Departement nom="Cantal " numero="15">Auril lac</Departement> 
<Departement nom="Haute-l_oi re" numero="43">l_e Puy-en-Vel lay</Departement> 
<Departement nom="Puy-de-D6me" numero="63">Clermont-Ferrand</DeparteiTient> 

</Region> 

<Region nom="Basse-Normandie"> 

<Departement nom="Cal vados" numero="14">Caen</Departement> 

<Departement nom="Manche" numero="50">Saint-L6</Departement> 

<Departement nom="0rne" numero="61">Alengon</Departement> 
</Region> 

<Region nom="Bourgogne"> 
<Departement nom="C6te-d'0r" numero="21">Di jon</Departement> 
<Departement nom="Nievre" numero="58">Nevers</Departement> 
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<Departement nom="Saone-et- Loire" numero="71">Macon</Departement> 

<Departement nom="Yonne" numero="89">Auxerre</Departement> 
<Popul ation> 

<Annee numero="1990">l 609 653</Annee> 

<Annee numero="1999">l 610 067</Annee> 

<Annee numero="2005">l 622 542</Annee> 

<Annee numero="2006">l 623 913</Annee> 
</Population> 
</Region> 

</France> 

Comme vous l'aurez compris, un noeud correspond done a une information dans une 
arborescence (comme le noeud <Region nom="Alsace"X/Region> ou encore <Departement 
nom=" Calvados" numero="14">Caen</Departement>). 

Le nceud est egalement qualifie de branche lorsqu'il possede un ou plusieurs nceuds enfants. 

Nous vous le precisions deja dans le developpement precedent sur la notion de Balise, un 
nceud possede toujours deux balises (une ouvrante et une fermante), a l'exception des 
balises autofermantes. 

Lattribut 

Comme nous venons de le voir, un noeud n'est ni plus ni moins qu'une information qui 
peut en contenir une ou plusieurs autres. Comment ces dernieres peuvent-elles etre 
contenues ? C'est la question que vous vous poserez bien souvent car deux possibilites 
s'offrent a vous, l'une aussi avantageuse que l'autre (sauf dans le cas d'une information 
assez longue). 

Voici une premiere arborescence que nous pourrions exploiter dans une animation Flash : 

<Alsace> 

<Departement> 

<Nom>Bas-Rhin</Nom> 

<Numero>67</Numero> 

<Prefecture>Strasbourg</Prefecture> 
</Departement> 

<Departement> 

<Nom>Haut-Rhin</Nom> 

<Numero>68</Numero> 

<Prefecture>Colmar</Prefecture> 
</Departement> 

</Al sace> 

Vous pouvez constater que toutes les informations rattachees a un departement sont 
contenues en tant que noeud. Les valeurs Bas-Rhin, 67 et Strasbourg comportent peu de 
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signes (chiffres et caracteres). De ce fait, nous aurions tout a fait pu simplifier notre arbo- 
rescence de la facon suivante : 

<Region nom="Alsace"> 
<Departement nom="Bas-Rhin" numero="67" prefecture="Strasbourg"/> 
<Departement nom="Haut-Rhin" numero="68" prefecture="Colmar"/> 

</Region> 

Cet autre constat est flagrant : il semblerait que 1' usage des attributs simplifie la structure 
des documents XML, mais comme nous l'evoquions precedemment, tout depend de la 
quantite de signes a stacker dans un noeud ou en tant que valeur d'attribut. 

Un attribut correspond avant tout a la structure suivante : 

<Nomdel_aBal ise NomDeLattribiit="Unevaleur"/> 
ou encore : 

I<Nomdel_aBal ise NomDeLattribut="Unevaleur"> 
<UneAutreBal ise>Une valeuK/UneAutreBal ise> 
</Nomdel_aBalise> 

Dans le premier cas, elle s'insere dans la balise autofermante, dans le deuxieme cas, elle 
est placee dans la balise ouvrante d'un nceud. Quelle que soit la methode, il s'agit 
toujours d'un paire nomAttribut="Valeur de 1 'attribut". Le nom de l'attribut ne doit pas 
contenir de caracteres accentues ou speciaux, ni meme d'espace. La valeur associee a 
l'attribut doit toujours etre saisie entre guillemets. 

L'exemple qui va suivre illustre que l'usage de l'attribut possede une limite. 

<Marine>Mais si tu ne te souviens pas de 1'endroit ou tu as place ton PDA, comment 
allons nous pouvoir retrouver notre chemin, car nous ne pouvons pas utiliser ton 
application de geolocal isation. Ce n'est pas tres malin de ta part.</Marine> 

<Luna>Que tu es bete ! Je n'ai pas oublie de prendre mon GPS qui est tout de meme plus 
pratique que mon PDA. De plus, le son du JerryJerry est de bien meilleure qualite que 
mon Achetesse. . .</l_una> 

<Marine>Oui, tu as raison.</Marine> 

Les trois nceuds ci-dessus pourrait etre difficilement transformes sous cette forme : 

<Replique nom="Marine" texte="Mais si tu ne te souviens pas de 1'endroit ou tu as place 
ton PDA, comment allons nous pouvoir retrouver notre chemin, car nous ne pouvons pas 
utiliser ton application de geolocal isation. Ce n'est pas tres malin de ta part."/> 

<Replique nom="l_una" texte="Que tu es bete ! Je n'ai pas oublie de prendre mon GPS qui 
est tout de meme plus pratique que mon PDA. De plus, le son du JerryJerry est de bien 
meilleure qualite que mon Achetesse. .. "/> 

<Replique nom="Marine" texte="0ui , tu as raison."/> 

La saisie et la lecture sont moins evidentes lorsque vous utilisez des balises avec des 
informations contenant de nombreux signes. Par ailleurs, si vous deviez utiliser des 
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guillemets dans la valeur d'un attribut, il faudrait les coder alors que c'est inutile entre les 
balises ouvrante ou fermante d'un noeud. 

<Region nomhabitants="l_es Alsaciens et les Alsaciennes">"Alsace"</Region> 

Le mot Al sace correspond a la valeur du noeud. Ce dernier peut tout a fait contenir des 
guillemets. En revanche, le code ci-dessous generera une erreur. 

<Region nomhabitants="l_es "Alsaciens" et "Alsaciennes"">Al sace</Region> 

Nous essayons de placer les termes Alsaciens et Alsaciennes entre guillemets, mais 
malheureusement, cela est impossible car il faut utiliser ces signes pour definir la valeur 
d'un attribut. Nous devons done utiliser le code &quot ; 

I<Region nomhabitants="Les "Alsaciens&quot ; et "Alsaciennes" "> 
*»Alsace</Region> 

Le tableau 13-1 presente les codes des caracteres speciaux que vous devez utiliser dans 
les valeur s d'attributs : 

Tableau 13-1 Les codes des caracteres speciaux 

Signe Code HTML 

Squot; 
< < 

> > 

& Samp; 



En conclusion 

L'usage des attributs s'avere tres utile et tres pratique lorsqu'il faut associer quelques 
informations a un noeud sans etre pour autant oblige de creer des noeuds enfants. 

Exploiter une arborescence XML dans une animation 

L' exploitation de 1' arborescence d'un fichier XML debute par la procedure de charge - 
ment des donnees qu'il contient. Nous allons done commencer par apprendre a placer le 
contenu d'un fichier XML dans la memoire vive de l'ordinateur, arm de pouvoir parcourir 
ses differentes branches. 

Chargement d'un document XML 

Fichiers dereference : Chapitrel3/xml . f 1 a et Chapitrel3/franceregions.xml 

Nous allons devoir utiliser trois variables pour charger puis stocker les lignes contenues 
dans le fichier XML : 

Ivar fichierXML:XML; 
var chargeurDonnees:URLLoader = new URLLoader( ) ; 
var adresseFichierXML:URLRequest = new URLRequestC'franceregions.xml ") ; 
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Vous noterez que nous faisons appel a la classe URLRequest( ) afin d'obtenir une instance 
du meme type, car la methode 1 oad( ) de la classe URLLoader( ) s'attend a un parametre de 
ce type. Par ailleurs, nous declarons en debut de script une variable intitulee fichierXML, 
mais nous l'initialiserons uniquement lorsque les donnees seront chargees. 



Attention 

Contrairement a l'AS1 /AS2, 1'instance de la classe XML que nous avons declaree et que nous allons initia- 
liser ne va pas faire appel a la methode 1 oad( ) qui n'existe plus. La classe XML( ) n'est plus du tout la 
meme que celle que nous utilisions en AS1/AS2. Si vous souhaitiez retravailler avec cette derniere, il 
faudrait instancier la classe XMLDocument( ). Bien sur, nous vous deconseillons de I'utiliser car elle ne 
presente pas les memes avantages et facilites d'exploitation d'une arborescence XML que ceux qu'offre la 
nouvelle classe de l'AS3. 



Avant de demander le chargement des donnees, nous definissons la fonction de rappel qui 
va etre appelee lorsque l'evenement Event. COMPLETE sera effectif (lorsque le chargement 
des donnees XML est termine et constate). 

function onCompletetevent: Event) :void { 

fichierXML = new XML(chargeurDonnees.data) ; 

zoneAffichage.text = fichierXML; 
} 

Quel role joue le contenu de la fonction onComplete ? Vous noterez que la variable que 
nous avions declaree dans la premiere ligne du script est enfin initialisee, afin que nous 
puissions I'utiliser pour lire le contenu du fichier XML. Mais pour cela, nous avons du 
faire appel a la propriete data de la classe URLLoader, ce qui permet d'acceder aux donnees 
chargees. 



Le nom de la fonction de rappel 

Dans cet exemple, le nom de la fonction est onCompl ete, mais nous aurions pu en choisir un autre. Vous 
devez simplement retenir que le terme ne doit pas contenir de caracteres accentues ou speciaux, ni 
d'espace. II ne doit pas non plus commencer par une majuscule. Si vous preferez choisir un nom frangais, 
c'est done tout a fait possible, comme : function chargementTermine (event: Event) :void 



Maintenant que nous avons tout declare et initialise, nous faisons appel a la methode 1 oad( ) 
de la classe URLLoaderO afin que les donnees contenues dans le fichier franceregions.xml 
soient chargees. Nous lancons ensuite l'ecouteur de fin de chargement. 



cha rgeur Donnees. load (ad res seFichierXML) ; 

cha rgeur Donnees. addEvent Listener (Event. COMPLETE, 



onComplete) ; 



Pour information 

Un certain nombre de developpeurs prennent et ont pris I'habitude de declarer les fonctions qui s'executent a 
la fin d'un chargement de donnees avant de faire appel a la methode dediee (1 oad( ) dans le cas du XML). 
Mais tant que les debits Internet seront plus lents que la vitesse d'execution d'une ligne d'instruction par 
un microprocesseur, cela n'a pas d'importance. 
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Le script complet qui vous permet de charger un document XML est a present termine ; 
vous devriez obtenir les lignes d' instructions suivantes : 

var fichierXML:XML; 

var chargeurDonnees:URLLoader = new URLLoader( ) ; 

var adresseFichierXML:URLRequest = new URLRequestC'franceregions.xml ") ; 

function onComplete(event:Event) :void { 

fichierXML = new XML(chargeurDonnees.data) ; 

zoneAffichage.text = fichierXML; 
} 

cha rgeu r Donnees. load (ad res se FichierXML) ; 
chargeurDonnees. add Event Listener (Event. COMPLETE, onComplete) ; 

Si nous n'avons pas ete assez precis dans nos explications, precisons une derniere fois 
que c'est uniquement a partir du moment ou le chargement du contenu du fichier XML 
est termine que vous pouvez y faire reference. De ce fait, si vous souhaitez effectuer la 
lecture d'un noeud ou d'un attribut de cette arborescence, vous devez placer le code dans 
la fonction onComplete de notre exemple, qui est utilisee par l'ecouteur surveillant 
l'evenement Event. COMPLETE. 

Script dans un fichier AS 

Fichiers de reference : Chapitrel3/xmlas.fla, Chapitrel3/xml .as et Chapitrel3/francere- 
gions .xml 

Le script de chargement d'un fichier XML a partir d'un fichier externe d'extension .as 
presente une structure bien evidemment differente propre a la POO, mais la procedure 
reste la meme. 

package { 

import fl ash. display. Sprite; 

import flash. net. URLLoader; 

import fl ash.net .URLRequest; 

import fl ash. events. Event; 

import fl ash. text. TextField; 

public class xml extends Sprite { 

private var f i chi erXML: XML ; 

private var chargeurDonnees:URLLoader = new URLLoaderO; 

private var adresseFichierXML:URLRequest = new URLRequestC'franceregions.xml"); 

publ ic function xml ( ) { 

chargeurDonnees.load(adresseFichierXML) ; 

cha rgeurDonnees.addEvent Listener (Event. COMPLETE, onComplete) ; 
} 

private function onComplete (event: Event) : void { 
fichierXML = new XML(chargeurDonnees.data) ; 
zoneAffichage.text = fichierXML; 



ActionScript 3 - Programmation sequentielle et orientee objet 



Lire un nceud 

Fichiers dereference : Chapitrel3/xml2.fla et Chapitrel3/franceregions3.xml 

L' ActionScript 3 presente l'avantage de posseder une classe XML tres performante. II est 
alors tres simple de lire une information contenue dans une arborescence. 

Pour commencer cette decouverte du XML, nous avons utilise le fichier le plus simple 
(franceregions2.xml) que nous proposons en telechargement. Voici la ligne d'instruction 
la plus elementaire qui permet de lire un nceud. 

zoneAffichage.text = fichierXML.Region[2]; 

Dans cet exemple, zoneAffichage est le nom d' occurrence d'un texte dynamique sur la 
scene. Nous devons done utiliser la propriete text pour pouvoir stacker et afficher une 
information. Nous obtenons le resultat suivant : 



Auvergne 



A savoir 

Si vous ne maitrisez pas encore 
avant de poursuivre votre lecture. 


les techniques de manipulation des tableaux, consultez le chapitre 7 



Comme vous l'aurez constate, la lecture d'un nceud est assez simple : il suffit de faire 
reference au nom d' instance de la classe XML que nous avions prealablement creee 
(fichierXML), puis d ' utiliser le nom de labalise a atteindre. 

Notre exemple contient des noeuds enfants portant le meme nom (Region). De ce fait, nous 
sommes obliges d' utiliser des crochets pour specifier le numero de noeud. Rappelons que 
le premier de la liste porte le numero d'index 0. Pour afficher le mot Alsace, il aurait 
justement fallu utiliser cet index, comme ceci : 

zoneAffichage.text = fichierXML. Region[0] ; 

Voici un exemple de script complet sur une image-cle : 

var fichierXML:XML; 

var chargeurDonnees:llRLLoader = new URLLoader( ) ; 

var adresseFichierXML:URLRequest = new URLRequestC'f ranceregions3.xml ") ; 

function onCompletetevent: Event) :void { 



fichierXML = new XML(chargeurDonnees.data) ; 

bt Noeud. add Event Li stener(MouseEvent. CLICK, 1 i reNoeud) 



} 



chargeurDonnees.load(adresseFichierXML) ; 
chargeurDonnees.addEvent Listener (Event. COMPLETE, onComplete) 

function 1 ireNoeud(evt:MouseEvent) :void { 

zoneAffichage.text = fichierXML. Region[2] ; 
} 
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Commentaires du script : 

btNoeud est le nom d'une instance de clip ou de bouton sur la scene. zoneAffichage est le 
nom d'un texte dynamique sur la scene. 

Script dans un fichier AS 

Fichiers de reference: Chapitrel3/xml2as.fla, Chapitrel3/xml2.as et Chapitrel3/ 
f ranceregions3.xml 

Nous sommes partis du fichier xml 2 . f 1 a que nous avons reenregistre en xml 2as . f 1 a. Nous 
avons precise le nom de la classe du document : xml 2 . as. Voici son contenu. 

package { 

import fl ash. display. Sprite; 

import flash.display.MovieClip; 

import fl ash. text. TextField; 

import flash. net. URLLoader; 

import fl ash.net.URLRequest; 

import fl ash. events. Event; 

import flash. events. MouseEvent; 

public class xml2 extends Sprite { 



private var f i chi erXML : XML ; 

private var chargeurDonnees:URLLoader = new URLLoaderO; 

private var adresseFichierXML:URLRequest = new URLRequest("franceregions3.xml ") ; 

public function xml2() { 

chargeurDonnees.load(adresseFichierXML) ; 
chargeurDonnees.addEvent Listener (Event. COMPLETE, onComplete) ; 

) 

private function onComplete(evt:Event) :void { 

fichierXML = new XML(chargeurDonnees.data) ; 

bt Noeud.addEvent Listener (MouseEvent .CLICK, 1 i reNoeud) ; 

btAttribut.addEventListener(MouseEvent.CLICK,l ireAttribut) ; 
} 

private function li reNoeud(evt :MouseEvent) :void { 

zoneAffichage. text = fichierXML. Region[2] ; 
} 

private function li reAttribut(evt:MouseEvent) :void { 
zoneAffichage. text = fichierXML. Region[2] .@nomhabitants ; 



} 
} 
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Si vous effectuez vos premiers pas en programmation orientee objet, soyez tres vigilant 
sur les oublis eventuels a" imports de classes et de packages. 

Nous avons commence notre approche du XML avec un premier exemple de code contenant 
des crochets, car il est tres frequent de travailler avec des documents possedant de 
nombreux noeuds avec le meme nom de balise. Vous rencontrerez egalement des cas ou 
plusieurs noeuds de meme niveau ne portent pas le meme nom de balise, comme dans 
1' exemple ci-dessous. 



Les exemples qui vont suivre... 

...ne possedent pas de fichiers correspondants dans les exemples a telecharger. 



<Fann"lle> 

<David>3 fevrier 1970</David> 

<Marine>12 novembre 1978</Marine> 

<Luna>14 octobre 2000</Luna> 

<Marjorie>15 mai 1975</Marjorie> 
</Famille> 

Nous n' avons plus besoin d'utiliser les crochets pour atteindre la valeur d'un nceud, car ce 
dernier est le seul a porter son nom de balise. En utilisant la ligne d'instruction ci-dessous, 
nous obtenons l'affichage 14 octobre 2000 sur la scene. 

zoneAffichage.text = fichierXML. Luna; 

Si ce noeud possede a son tour des noeuds enfants, il suffit alors d'y faire reference 
comme ceci : 

zoneAffichage.text = fichierXML. Luna. DateNaissance; 

Fichier XML : 

<Famille> 

<David> 

<DateNaissance>3 fevrier 1970</DateNaissance> 

<LieuNaissance>Paris XIIe</LieuNaissance> 
</David> 

<Marine> 

<DateNaissance>12 novembre 1978</DateNaissance> 

<LieuNaissance>Paris Xe</LieuNaissance> 
</Marine> 

<Luna> 

<DateNaissance>14 octobre 2000</DateNaissance> 

<LieuNaissance>Rambouillet (78)</LieuNaissance> 
</Luna> 

<Marjorie> 

<DateNaissance>15 mai 1975</DateNaissance> 

<LieuNaissance>Nancy (54)</LieuNaissance> 
</Marjorie> 

</Famille> 
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Dans la pratique, les nceuds enfants d'un meme niveau qui ne portent pas le meme nom 
de balise se trouvent tres souvent en fin de branche, mais rarement au premier niveau 
(sauf pour les fichiers XML de configuration). 

Pour finir, en imaginant que plusieurs nceuds du meme niveau existent dans un nceud 
enfant, nous devons alors proceder comme nous l'avions fait initialement. Pour obtenir 
Boi re avec le fichier XML ci-dessous, nous devons ecrire la ligne suivante : 

zoneAffichage.text = fichierXML. Luna.Passion[l] ; 

Ficher XML : 

<Famille> 

<David> 

<Passion>VTT</Passion> 

<Passion>Gastronomie</Passion> 

<Passion> Films d'auteurs</Passion> 
</David> 

<Marine> 

<Passion>Dessiner</Passion> 

<Passion>Chanter</Passion> 

< Pass ion>Danser</ Pas sion> 
</Marine> 

<Luna> 

< Pass ion>Manger</ Pas sion> 

<Passion>Boi re</Passion> 

<Passion>Dormir</Passion> 
</Luna> 

<Marjorie> 

<Passion>Cuisiner</Passion> 

<Passion>Dessins sur supports varies</Passion> 

<Passion>l_es enfants</Passion> 
</Marjorie> 

</Famille> 



Lire un attribut 

Fichiers dereference : Chapitrel3/xml2.fla et Chapitrel3/franceregions3.xml 

La technique de lecture d'un attribut est tres simple car elle s'apparente etrangement a 
celle d'un noeud, a un detail pres, le caractere arobase (@). 



Remarque 

Un attribut ne peut pas contenir de nceud enfant, ni meme d'attribut imbrique. 



Si nous utilisons la ligne d'instruction ci-dessous, le texte Auvergnats 
s'affiche sur la scene. 



Auvergnates 



zoneAffichage.text = fichierXML. Region[2] .©nomhabitants; 
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Pour les developpeurs neophytes en AS3, cette syntaxe est assez troublante car seul le 
caractere @ permet de faire la difference entre un noeud et un attribut. II est vrai que si 
nous omettons de saisir l'arobase, nous faisons alors reference au nom d'une balise, 
c'est-a-dire au nom d'un nceud et non plus un attribut. Le risque d'erreur est done important 
lors de vos premiers developpements. 

Voici un exemple de script complet : 

var fichierXML:XML; 

var chargeurDonnees:llRLLoader = new URLLoader( ) ; 

var adresseFichierXML:URLRequest = new function onCompletetevent: Event) : void { 

fichierXML = new XML(chargeurDonnees.data) ; 

btAttribut.addEventl_istener(MouseEvent.CLICK,li reAttribut) ; 
} 

chargeurDonnees.load(adresseFichierXML) ; 
chargeurDonnees.addEvent Listener (Event. COMPLETE, onComplete) ; 

function lireAttribut (evt:Event) :void { 

zoneAffichage.text = fichierXML. Region[2] .@nomhabitants; 
} 

Commentaires du script : 

btAttribut est le nom d'une instance de clip ou de bouton sur la scene. zoneAffichage est 
le nom d'un texte dynamique sur la scene. 

Lire plusieurs attributs 

Pour pouvoir lire tous les attributs d'une balise, vous pouvez utiliser la syntaxe suivante : 

fi chi erXML. Region [2]. attribute("*").toXMLString(); 
ou celle-ci : 

fichierXML.Region[2].attributes().toXMLString(); 



Important 

La fonction toXMLString( ) permet en temps normal d'afficher le contenu d'un noeud encadre de ses 
balises. Cela sous-entend done que cette fonction ne peut fonctionner qu'avec des nceuds et non des attri- 
buts. Dans ce cas, la fonction essaye de trouver une structure XML inexistante (car tous les attributs se 
trouvent dans le meme noeud et non dans differents noeuds). Ne la trouvant pas, chaque propriete est 
renvoyee a la ligne. 



Afin que cet exemple fonctionne, il faudrait changer le contenu du fichier XML fourni, 
comme ceci : 

<France> 

<Region nomhabitants="Alsaciens" annee="1212">Alsace</Region> 
<Region nomhabitants="Aqui tains" annee=" 1345 ">Aquitaine</ Reg ion> 
<Region nomhabitants="Auvergnats" annee="1190>Auvergne</Region> 



</France> 
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Vous recupereriez alors les valeurs Auvergnats et 1190. 

Importance de la fonction toXMLStringQ 



En AS3, l'utilisation du XML dans une animation se fait tres simplement, en comparaison 
avec FAS1/AS2. 

Lorsque vous tentez de lire un noeud precis, vous obtenez la valeur contenue entre les 
balises et non pas la valeur accompagnee des balises, comme c'etait le cas en AS1/AS2. 
De ce fait, si vous etiez auparavant habitue a lire le contenu d'un noeud avec un f i rstChi 1 d 
ou un chi 1 dNode[0], vous adopterez vite cette technique plus pratique. 

En AS3, vous pointez directement un nceud. Seule sa valeur vous est renvoyee, mais il 
s'avere que, dans certains cas, vous aurez besoin de recuperer et/ou connaitre le nom des 
balises qui entourent le texte recupere. Vous utiliserez alors la fonction toXMLStringt ). 

FichierXML: 

<Famille> 

<David> 

<Passion>VTT</Passion> 

<Passion>Gastronomie</Passion> 

<Passion>Films d'auteurs</Passion> 
</David> 

</Famille> 

Voici le code necessaire pour afficher Gastronomie dans un texte dynamique intitule 

zoneAf f i chage sur la scene : 

zoneAffichage.text=fi chi erXML. David. Pa ssion[l] ; 

Voici le code necessaire pour afficher <Passion>Gastronomie</Passion> dans un texte 
dynamique intitule zoneAf fi chage sur la scene : 

zoneAf fi chage. text=fi chi erXML. Da v id. Pa ssion[l] .toXMLString( ) ; 



toXMLString() avec des attributs de balise 

Par definition, si la fonction toXMLStringO renvoie la structure XML d'un nceud, que se 
passe-t-il avec un ou plusieurs attributs ? 

<Famille> 



<David nom="TARDIVEAU" surnom="Yazo"> 
<Passion>vTT</Passion> 
<Passion>Gastronomie</Passion> 
<Passion>Films d'auteurs</Passion> 

</David> 

</Famille> 
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En partant de l'exemple ci-dessus, si nous n'avions qu'un seul attribut, cela n'aurait 
aucune incidence. En revanche, avec deux ou plusieurs attributs, dans la mesure oil ils ne 
se trouvent pas entre des balises, chaque attribut est affiche a la ligne. 

zoneAffichage.text = fichierXML. David. attributes( ) .toXMLString( ) ; 

Voici le resultat : 

TARDIVEAU 
Yazo 




Effectuer une recherche dans une arborescence XML 

La recherche d'un attribut ou d'un noeud peut etre effectuee de differentes facons, dans la 
mesure oil le resultat d'une requete n'est tres souvent qu'une etape preliminaire pour 
trouver une information encore plus precise. 

Partons de l'exemple ci-dessous pour effectuer deux premieres recherches : 

Fichiers de reference : Chapitrel3/xml3.fla et Chapitrel3/cinema.xml 

<Cinema> 

<Film nom="Le Papillon"> 

<Realisateur>Philippe MUYL</Real isateur> 

<ActeurPrincipal sexe="M">Michel SERRAULT</ActeurPrincipal> 

<Annee>2002</Annee> 

<Genre>Comedie drama tique</Genre> 

<Pays>France</Pays> 
</Film> 

<Film nom="Erin Brockovich"> 

<Realisateur>Steven SODERBERGH</Real isateur> 

<ActeurPrincipal sexe="F">Jul ia ROBERTS</ActeurPrincipal> 

<Annee>2000</Annee> 

<Genre>Dramatique</Genre> 

<Pays>US</Pays> 
</Film> 

<Film nom="The Bourne Ultimatum") 

<Realisateur>Paul GREENGRASS</Real isateur> 

<ActeurPrincipal sexe="M">Matt DAMON</ActeurPrincipal> 

<Annee>2007</Annee> 

<Genre>Action</Genre> 

<Pays>US</Pays> 
</Film> 

<Film nom=" DOGMA" > 

<Real isateur>Kevin SMITH</Real isateur> 

<ActeurPrincipal sexe="M">Matt DAMON</ActeurPrincipal> 

<Annee>1999</Annee> 

<Genre>Fantastique</Genre> 

<Pays>US</Pays> 
</Film> 
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<Fi 1 m nom="Les enfants du marais"> 

<Realisateur>Jean BECKER</Real isateur> 

<ActeurPrincipal sexe="M">Michel SERRAULT</ActeurPrincipal> 

<Annee>1999</Annee> 

<Genre>Comedie dramatique</Genre> 

<Pays>France</Pays> 
</Film> 

< F i 1 m nom="Un crime au paradis"> 

<Realisateur>Jean BECKER</Realisateur> 

<ActeurPrincipal sexe="M"> Jacques VILLERET</ActeurPrincipal> 

<Annee>200K/Annee> 

<Genre>Comedie dramatique</Genre> 

<Pays>France</Pays> 
</Film> 

< F i 1 m nom="Mona Lisa Smile"> 

<Realisateur>Mike NEWELL</Real isateur> 

<ActeurPrincipal sexe="F">Jul ia ROBERTS</ActeurPrincipal> 

<Annee>2003</Annee> 

<Genre>Comedie dramatique</Genre> 

<Pays>US</Pays> 
</Film> 

</Cinema> 

Recherche par nceud 

Pour afficher Paul GREENGRASS sur la scene, nous avons commence par rechercher les films 
crees en 2007. 

zoneAffichage.text = fichierXML. Film. (Annee==2007) ; 

Puis, nous avons specifie le nom du nceud a recuperer. 

zoneAffichage.text = fichierXML. Film. (Annee==2007) .Real isateur; 

Comme vous pouvez le constater, la technique de recherche par nceud est tres simple. 
Vous commencez par saisir le debut d'une ligne d'instruction classique, comme si vous 
vous appretiez a indiquer le chemin qui mene a un nceud, mais la fin de la ligne d'instruction 
se termine par une instruction entre parentheses : 

(Annee==2007); 

Vous precisez le nom d'une balise, suivi d'un operateur de comparaison et de la valeur a 
evaluer. 



Attention 








Vous devez faire preceder votre condition de recherche, placee 
ci-dessous renverrait done une erreur. 


entre parentheses, 


par 


un point. La ligne 


zoneAffichage.text = fichierXML. Film(Annee==2007) ; 
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Lorsque vous reussissez a trouver un noeud, vous pouvez alors le parcourir en y ajoutant 
des noms de noeuds ou d'attributs comme dans les exemples ci-dessous. 

Cette ligne permet d'afficher Paul GREENGRASS. 

zoneAffichage.text = f i chi erXML. Film. (Annee==2007) .Real isateur; 
Cette ligne permet d'afficher Action. 

zoneAffichage.text = fichierXML. Film. (Annee==2007) .Genre; 
Cette ligne permet d'afficher France. 

zoneAffichage.text = fichierXML. Film. (Annee==2007) .Pays; 
Voici un exemple de script complet : 



Rappel 

Les fichiers de reference de cette animation sont Chapi trel3/xml 3 . f 1 a et Chapi trel3/d nema . xml 



var fichierXML:XML; 

var chargeurDonnees:llRLLoader = new URLLoader( ) ; 

var adresseFichierXML:URLRequest = new URLRequestC'cinema.xml ") ; 

function onComplete(event:Event) ;void { 

fichierXML = new XML(chargeurDonnees.data) ; 

bt Noeud. add Event Li stener(MouseEvent . CLICK, 1 ireNoeud) ; 
} 

chargeurDonnees.load(adresseFichierXML) ; 
chargeurDonnees.addEvent Listener (Event. COMPLETE, onComplete) ; 

function 1 ireNoeud(evt:Event) :void { 

trace(fichierXML.Film.(Annee==2007)); 

zoneAffichage.text = fichierXML. Film. (Annee==2007) .Real isateur; 
} 

Commentaires du script : 

btNoeud est le nom d'une instance de clip ou de bouton sur la scene. zoneAffichage est le 
nom d'un texte dynamique sur la scene. La fonction trace( ) ne sert qu'a afficher l'infor- 
mation qu'elle contient entre parentheses dans la fenetre Sortie de l'IDE de Flash. 

Recherche par attribut 

Pour afficher Michel SERRAULT sur la scene, nous avons commence par rechercher le film 
dontlenomest Le Papi 11 on en utilisant 1' attribut nom de la balise Film. 

zoneAffichage.text=fichierXML. Film. (@nom=="Le Papi 11 on") ; 

Puis, nous avons specifie le nom du nceud a recuperer. 

zoneAffichage.text=fichierXML. Film. (@nom=="Le Papil Ion") .ActeurPrincipal ; 
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Comme vous pouvez le constater, la technique de recherche par attribut est aussi simple 
que celle par nceud. Vous commencez par saisir le debut d'une ligne d'instruction classique, 
comme si vous vous appretiez a indiquer le chemin qui mene a un nceud, mais la fin de la 
ligne d'instruction se termine par une instruction entre parentheses : 

(@nom=="Le Papillon"); 

Puisque nous evaluons la valeur d'un attribut, il est imperatif d'utiliser le signe arobase. 
Vous precisez ensuite l'operateur de comparaison et la valeur a evaluer. 



Attention 

Vous devez faire preceder votre condition de recherche, placee entre parentheses, par un point. La ligne 
ci-dessous renverrait done une erreur. 



zoneAffichage.text = fichierXML. Film(@nom=="Le Papillon"); 

Lorsque vous parvenez a trouver un nceud, vous pouvez alors le parcourir en y ajoutant 
des noms de nceuds ou d'attributs comme dans les exemples ci-dessous. 

Cette ligne permet d'afficher Michel SERRAULT. 

zoneAffichage.text = fichierXML. Film. (@nom=="Le Papillon" ) .ActeurPrincipal ; 
Cette ligne permet d'afficher Phil ippe MUYL. 

zoneAffichage.text = fichierXML. Film. (@nom=="Le Papillon") .Real isateur; 
Cette ligne permet d'afficher la lettre M pour Masculin. 

zoneAffichage.text = fichierXML. Film. (@nom=="Le Papil Ion" ) .ActeurPrincipal .@sexe; 
Cette ligne permet d'afficher 2002. 

zoneAffichage.text = fichierXML. Film. (@nom=="Le Papillon" ) .Annee; 
Voici un exemple de script complet : 



Rappel 

Les fichiers de reference de cette animation sont Chapi trel3/xml 3 . f 1 a et Chapi t rel3/ci nema . xml 



var fichierXML:XML; 

var chargeurDonnees:URLLoader = new URLLoader( ) ; 

var adresseFichierXML:URLRequest = new URLRequestC'cinema .xml' 

function onComplete(event:Event) :void { 

fichierXML = new XML(chargeurDonnees.data) ; 

btAtt r i but. addEvent Listener (Mouse Even t.C LI CK,1 i reAttribut) ; 
} 

cha rgeur Donnees. load (ad res se FichierXML) ; 

chargeurDonnees. add Event Listener (Event. COMPLETE, onComplete) ; 
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function 1 ireAttributtevt: Event) :void { 
trace(fichierXML. Film. (@nom=="l_e Pa pi 11 on" ) .ActeurPrincipal .@sexe) ; 
zoneAffichage.text=fichierXML.Film. (@nom=="l_e Papil Ion" ) .ActeurPrincipal ; 

} 

Commentaires du script : 

btAttribut est le nom d'une instance de clip ou de bouton sur la scene. zoneAffichage est 
le nom d'un texte dynamique sur la scene. La fonction traceO ne sert qu'a afficher 
1' information qu'elle contient entre parentheses dans la fenetre Sortie de TIDE de Flash. 

Les operateurs de recherche 

Dans les exemples precedents, nous avons recherche des branches precises. Un seul film 
a done ete trouve a chaque fois, mais nous aurions egalement pu obtenir plusieurs resultats. 
Ainsi, la ligne d' instruction ci-dessous permettrait d' afficher trois films. 

fichierXML. Film. ( Pay s==" France") ; 

L' operate ur de comparaison == ne renvoie done pas obligatoirement une seule valeur. 
Mais quels sont les autres operateurs que nous pouvons utiliser ? 

Different de... 

La requete suivante permet d' obtenir tous les noeuds (de niveau 1) du document qui ne 
correspondent pas a des films americains. 

fichierXML. Film. (Pays!="US") ; 

Loperateur != permet d'evaluer une difference. Dans notre fichier XML, des films fran- 
cais et americains sont proposes, mais seules les productions venant de France sont recu- 
peret s. 

Superieur/inferieur et superieur ou egal/inferieur ou egal 

Ces operateurs s'averent tres pratiques pour recuperer des noeuds en fonction d'une 
limite. Ainsi dans l'exemple ci-dessous, nous allons pouvoir connaitre tous les films sortis 
depuis 2002. 

| fichierXML.Film.(Annee>=2002); 



Operateur 


Description 


== 


Recherche d'egalite 


!= 


Recherche de difference 


> 


Recherche de superiorite 


>= 


Recherche de superiorite ou d'egalite 


< 


Recherche d'inferiorite 


<= 


Recherche d'inferiorite ou d'egalite 
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Voici un exemple de script complet : 



Rappel 

Les fichiers de reference de cette animation sont Chapi trel3/xml 4 . f 1 a et Chapi t rel3/ci nema . xml 



var fichierXML:XML; 

var chargeurDonnees:llRLLoader = new URLLoader( ) ; 

var adresseFichierXML:URLRequest = new URLRequestC'cinema.xml ") ; 

function onComplete(event:Event) :void { 

fichierXML = new XML(chargeurDonnees.data) ; 

bt Difference. add Event Li stener(MouseEvent.C LI CK.rechercheDifference) ; 

btRecherchePosterieure.addEventListener(MouseEvent.CLICK,recherchePosterieure) ; 
} 

cha rgeur Donnees. load (ad res se FichierXML) ; 

chargeurDonnees. add Event Listener (Event. COMPLETE, onComplete) ; 

function rechercheDifference(evt:Event) :void { 
zoneAffichage.text = fichierXML. Film. (Pays!="US" ) .Real isateur; 



function recherchePosterieure(evt: Event) :void { 

zoneAffichage.text=fichierXML. Film. (Annee>=2002) .ActeurPrincipal ; 
} 

Commentaires du script : 

btDif ference et btRecherchePosteri eure sont les noms d'instances de clip ou de bouton sur 
la scene. zoneAffichage est le nom d'un texte dynamique sur la scene. 

Croiser les recherches ou recherches multicriteres 

Vous l'aurez peut-etre compris, tout ce qui se trouve entre les parentheses pour effectuer 
une recherche releve d'une evaluation. Nous pouvons done combiner plusieurs requetes avec 
les operateurs 1 1 et &&. Ainsi, 1' exemple ci-dessous permet de trouver tres precisement 
tous les films de Jean Becker qui sont sortis depuis 2000. 

zoneAffichage.text = fichierXML. Film. (Real isateur=="Jean BECKER" && Annee>=2000) : 

Cet autre exemple permet de trouver tres precisement tous les films americains dont 
l'acteur principal est une femme. 

fichierXML. Film. (Pays=="US" && ActeurPrincipal .@sexe=="F" ) ; 



Remarque 

Utilisez I'integralite du script precedent pour replacer les deux lignes d'instructions dans leur contexte. 
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Rechercher plusieurs noeuds ou attributs a des niveaux differents 

Vous pourrez recuperer la valeur de plusieurs noeuds ou attributs de noeuds a des niveaux 
differents, en ne precisant aucune entree : 

IfichierXML. Film. Real isateur; 
f ichier XML. Region. Departement. ©prefecture; 

Ainsi, en partant des fichiers cinema. xml et france3.xml, vous pourriez trouver toutes les 
prefectures de France ou tous les noms des realisateurs des films proposes dans le document 
(testez, a ce propos, le fichier xml 6 . f 1 a). 

Les deux lignes d' instructions ci-dessous font d'ailleurs appel a la classe XMLList( ) pour 
stocker le resultat des requetes. 

var resultat:XMLList=new XMLI_ist(fichierXML. Film. Real isateur) ; 
zoneAffichage.text = resultat[2]; 

var resultat:XMLList=new XMLList(fichierXML.Region.Departement.Oprefecture) ; 
trace(resultat[12]); 



Remarque 

Utilisez I'integralite du script precedent pour replacer les deux lignes d'instructions dans leur contexte. 



Recherche de parent 

Lorsque vous effectuez une recherche, vous pouvez l'affiner par la suite en indiquant le 
nom d'un noeud enfant ou d'un attribut. Vous scrutez done les informations descendantes 
ou en aval. Dans notre cas, nous devons connaitre le noeud parent pour pouvoir lire 
d'autres informations qu'il contient. 

Fichiers de reference : Chapitrel3/xml6.fla et Chapitrel3/france3.xml 



Attention 

Vous ne pouvez pas rechercher un attribut dans une balise autofermante ou une balise vide. 



Dans le fichier XML de reference que nous allons utiliser pour exemple, vous pouvez 
constater que l'arborescence est plus complexe que celles avec lesquelles nous avons 
travaille jusqu' a present. 

Elle presente par ailleurs des balises Departement vides alors que nous aurions pu utiliser 
des balises autofermantes. Precisons simplement que ce type de balise ne peut faire l'objet 
d'une recherche. 

Nous avons choisi un tel fichier, avec autant de noeuds enfants et d' attributs, pour demontrer 
que la recherche d'un attribut s'avere indispensable pour pouvoir, dans ce cas, retrouver 
une information. 
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Nous aimerions determiner la region de France et le numero du departement ou se trouve 
Toulon. Avant de nous pencher sur le code, voici la structure du noeud avec lequel nous 
allons travailler. 

<Region nom="Provence-Alpes-C6te d'azur"> 

<Departement nom="Alpes de Hautes-Provence" numero="4" prefecture="Digne"> 

1 -</Departement> 

<Departement nom="Hautes-Alpes" numero="5" prefecture="Gap"X/Departement> 

<Departement nom="Alpes-Maritimes" numero="6" prefecture="Nice"X/Departement> 

<Departement nom="Bouches-du-Rhone" numero="13" prefecture="Marseille"> 

'-■></Departement> 

<Departement nom="Var" numero="83" prefecture="Toulon"X/Departement> 

<Departement nom="Vaucluse" numero="84" prefecture="Avignon"X/Departement> 

<Population> 

<Annee numero="1990">4 257 907</Annee> 

<Annee numero="1999">4 506 151</Annee> 

<Annee numero="2005">4 750 947</Annee> 

<Annee numero="2006">4 780 989</Annee> 
</Population> 
</Region> 



Remarque 

Rappelons qu'il s'agit de I'un des 22 noeuds contenus dans le fichier f rance3.xml . et non de I'arbores- 
cence complete d'un fichier XML. 



La redaction de la ligne d' instruction qui permet de trouver les valeurs Provence-Alpes- 
Cote d'azur et 83 necessite une petite reflexion. 

Nous pouvons constater que la ligne du fichier XML qui contient l'attribut prefecture 
avec la valeur Toulon, est vide. Nous ne pouvons done pas recuperer d'information 
descendante. Seuls les attributs au meme niveau que celui de la prefecture et les informa- 
tions relatives aux nceuds ascendants (done le noeud parent) peuvent etre recuperees. 

Lutilisation de la fonction parent( ) permet de lire les donnees contenues dans le noeud 
parent du chemin specifie. Ainsi, dans l'exemple suivant, nous pouvons recuperer le 
noeud XML que nous vous avons presente ci-dessus : 

fichierXML. Region. Departement. (©prefecture == "Toulon") .pa rent ( ) ; 

Rappelons que nous cherchons a recuperer le nom de la region dans laquelle se trouve la 
ville de Toulon. Cette information (Provence-Al pes-C6te d ' Azur) figure en tant que valeur 
de l'attribut nom de la balise Region (noeud parent que nous venons de recuperer). II ne 
reste plus qu'a terminer notre requete en ajoutant l'attribut @nom. 

fichierXML. Region. Departement. (©prefecture == "Toulon") .pa rent ( ) .@nom; 

Nous risquerions d'avoir a nouveau besoin d'exploiter le noeud parent, il serait done plus 
judicieux de stacker le resultat de la premiere requete dans une variable. 






var regionTrouvee:XML = fichierXML. Region. Departement. (©prefecture == "Toulon") .parentt ); 
zoneAffichage.text = regionTrouvee.@nom; 
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Information 

Precisons que nous pourrions remonter de plusieurs niveaux pour obtenir les informations de nceuds 
parents ascendants. Dans I'exemple ci-dessous, nous recuperons I'integralite du contenu du document 
XML (fichier f rance3.xml). 



fichierXML.Region.Departement. (©prefecture == "Toulon") .pa rent ( ) .pa rent ( ) ; 

Pour rechercher a present un attribut figurant au meme niveau que celui de la prefecture, 
nous devons completer la requete avec l'attribut numero pour trouver le numero de depar- 
tement 83. 

zoneAffichage.text=fichierXML.Region.Departement . (©prefecture == "Toulon") .©numero; 

Nous n'utilisons pas la fonction pa rent ( ) car nous devons rester au meme niveau que le 
resultat de la recherche. 



Parcourir toute une arborescence 

Si vous avez lu toutes les explications precedentes, vous pouvez comprendre a quel point 
le besoin de parcourir une arborescence est moins utile que cela pouvait l'etre en AS1/ 
AS2, pour ceux qui connaissent ces versions du langage. Les fonctions de recherche/ 
nitre evitent en effet de faire appel a une boucle for( ) ou for each( ). 

Cependant, dans certains cas, vous ne pourrez pas faire autrement : il faudra ecrire une 
boucle sur un document XML. 

En partant de I'exemple ci-dessous, nous allons montrer que la boucle for each( ) permet 
d'obtenir une mise en forme particuliere. 

Fichiers de reference : Chapitrel3/xml8.fla et Chapitrel3/cinema.xml 



Remarque 

Referez-vous au chapitre 10 dedie a I'apprentissage des iterations pour en comprendre le fonctionnement. 



Commencez par ouvrir le fichier cinema. xml et parcourez les lignes qu'il contient pour 
prendre connaissance de sa structure (il s'agit du fichier XML qui a ete presente dans la 
section Effectuer une recherche dans une arborescence XML). 

Nous souhaiterions obtenir l'affichage du texte sous les deux formes suivantes : 

Exemple 1 : 

Film : Le Papillon 

Film : Erin Brockovich 

Film : The Bourne Ultimatum 

Film : DOGMA 

Film : Les enfants du marais 
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Film : Un crime au paradis 
Film : Mona Lisa Smile 
Exemple 2 : 

2002 : Le Papillon 

2000 : Erin Brockovich 
2007 : The Bourne Ultimatum 
1999 : DOGMA 

1999 : Les enfants du marais 

2001 : Un crime au paradis 

2003 : Mona Lisa Smile 

Dans le premier exemple, nous nous contentons d'aj outer la chaine de caracteres Film : 
devant le nom d'un film, alors que dans l'exemple 2, nous allons prealablement afficher 
l'annee de sortie de film, qui est une information stockee sous forme d'attribut dans la 
balise principale de chaque nceud. 

Analyse de l'exemple 1 



Remarque 

Consultez l'exemple complet du script a la fin de I'analyse de l'exemple 2 pour replacer cet extrait de code 
dans son contexte. 



Dans le deuxieme exemple (la fonction de rappel affichageSousFormel), nous commencons 
par extraire la liste des noms de films pour la stacker dans une instance de la classe XMLLi st. 

var 1 isteNoms Films: XMLLi st = new XMLLi st(fi chi erXML. Film.@nom) ; 

Nous vidons ensuite le contenu de notre texte dynamique intitule zoneAffichage qui se 
trouve sur la scene. 

zoneAffichage.text="" j 

Pour finir, nous allons effectuer une boucle for each( ) pour parcourir 1' instance 1 Iste- 
Noms Films. 

I for each (var noms in 1 isteNomsFilms) { 
zoneAffichage. appendTextt "Film : "+noms+"\n") ; 

La fonction appendTextt ) n'est pas une methode (ou une fonction) de la classe XMLO ni 
meme de la classe XMLLi st(). Dans notre cas, elle fait partie des membres de la classe 
TextFieldO. Attardons-nous done sur le parametre "Film : "+noms+"\n". 
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Cette chaine de caracteres se decompose en trois parties concatenees grace a l'operateur +. 
Puisque nous souhaitons voir s'amcher « Film : » en debut de ligne, nous saisissons ce 
pre fixe entre guillemets. 

La variable locale noms va successivement prendre pour valeur celles qui sont stockees 
dans l'instance de laclasse XMLListO grace a la boucle for eachO. 

Enfin, nous completons le parametre de la methode appendTextO par la chaine \n qui 
permet d'effectuer un saut de ligne a chaque iteration. 

Grace a cette boucle, nous pouvons done parcourir toutes les valeurs de l'instance XMLLi st( ) 
et obtenir un affichage sous forme de liste. 

Analyse de I'exemple 2 



Remarque 

Consultez le script complet a la fin de I'analyse de cet exemple pour replacer cet extrait de code dans son 
contexte. 



function affichage rSousForme2(evt: Event) :void 
zoneAffichage.text="" ; 

for each (var leNoeud in fichierXML. Film) { 
zoneAffichage.appendText(leNoeud.Annee+" : 



} 



"+leNoeud.@nom+"\n") ; 



Dans le deuxieme exemple (la fonction de rappel affichageSousForme2), vous constaterez 
que nous ne faisons pas appel a la classe XMLListO. Nous pointons directement chaque 
ligne du fichier XML en cherchant a lire les proprietes contenues dans les elements 
fichierXML. Film. Precisons qu'en faisant reference a cet extrait de code, nous pointons 
vers tous les noeuds. 

Essayez d'effectuer un trace(fichierXML.Film) et un trace(fichierXML.Film[l]) ; vous 
comprendrez pourquoi les parametres de la boucle for each( ) correspondent a tous les 
nceuds de l'arborescence. 

Voici un exemple de script complet : 

var fichierXML:XML; 

var chargeurDonnees:llRLLoader = new URLLoaderO; 

var adresseFichierXML:URLRequest = new URLRequestC'cinema.xml ") ; 

function onComplete(event:Event) :void { 

fichierXML = new XML(chargeurDonnees.data) ; 

btExemplel.addEventListener(MouseEvent.CLICK,affichageSousFormel) ; 
btExempl e2.addEvent Li stener(MouseEvent. CLICK, affichageSousForme2) ; 
} 

chargeurDonnees.load(adresseFichierXML) ; 
chargeurDonnees.addEvent Listener (Event. COMPLETE, onComplete) ; 
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function affichageSousFormel(evt:Event) :void { 
var 1 isteNomsFilms:XMLList = new XMLLi st (f i chi erXML. Film.@nom) ; 
zoneAffichage.text="" ; 

for each (var noms in 1 isteNomsFilms) { 
zoneAffichage.appendTextC'Film : "+noms+"\n") ; 



function affichageSousForme2(evt: Event) :void 
zoneAffichage.text="" j 



for each (var leNoeud in fichierXML. Film) ( 
zoneAffichage.appendText(leNoeud.Annee+" 



"+leNoeud.@nom+"\n") ; 



) 



Pourquoi faire appel a la classe XMLList() ? 

L'objectif d'une telle methode est de demontrer, qu'en passant par la classe XMLLi st( ), on 
peut isoler des donnees en les stockant dans une instance qui beneficie, de ce fait, des 
methodes et proprietes de la classe dont elle est issue. 



Modifier la valeur d'un noeud ou d'un attribut 

Fichiers dereference : Chapitrel3/xml7.fla et Chapitrel3/entreprise.xml 

Une fois encore, la technique est tres simple : il suffit de faire reference a la valeur du nceud 
ou de 1' attribut a modifier pour pouvoir modifier sa valeur. Ainsi, dans l'exemple suivant, 
nous allons changer le nom du service dans lequel travaille Jacques DURAND. 

<Entreprise> 

<Collaborateur nom="DUPUIS" prenom="Marie"> 

<Service>Financier</Service> 

<Etage>2</Etage> 
</Coll aborateur> 

<Collaborateur nom="MARTIN" prenom="Lucie"> 

<Service>Di rection du personnel</Service> 

<Etage>3</Etage> 
</Coll aborateur> 

<Collaborateur nom="DURAND" prenom="Jacques"> 

<Service>Expedition du courier</Service> 

<Etage>RDC</Etage> 
</Coll aborateur> 

<Collaborateur nom="DUP0NT" prenom="Jean"> 

<Service>Di rection du personnel</Service> 

<Etage>3</Etage> 
</Coll aborateur> 

</Entreprise> 
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Ligne d'instruction a executer : 

fichierXML.Col laborateur[2] .Service=" Recherche et developpement" ; 

Void un exemple de script complet : 

var fichierXML:XML; 

var chargeurDonnees:llRLLoader = new URLLoader( ) ; 

var adresseFichierXML:URLRequest = new URLRequestC'entreprise.xml ") ; 

function onComplete(event:Event) :void { 

fichierXML = new XML(chargeurDonnees.data) ; 

btChangerValeur. add Event Li stener(MouseEvent. CLICK, changerValeur) ; 
bt Li reValeur. add Event Li stener(MouseEvent.CLICK,l ireValeur) ; 
} 

chargeurDonnees.load(adresseFichierXML) ; 
chargeurDonnees.addEvent Listener (Event. COMPLETE, onComplete) ; 

function changerValeur(evt:Event) :void { 

zoneAffichage.text = "Ancien service (avant changement) : 

^"+fichierXML.Col laborateur[2] .Service; 

fichierXML.Col 1 aborateur[2] . Service=" Recherche et developpement" ; 
} 

function li reValeur(evt:Event) :void { 

zoneAffichage.text = "Nouveau service : "+fichierXML. Col laborateur[2] .Service; 
} 

Commentaires du script : 

btChangerValeur et btLi reValeur sont les noms d'instances de clip ou de bouton sur la 
scene. zoneAf f i chage est le nom d'un texte dynamique sur la scene. 

Pour changer la valeur d'un attribut, nous devons proceder de facon analogue en rempla- 
cant le nom de nceud par le nom d'attribut, sans oublier d'utiliser le signe @. 

fichierXML.Collaborateur[2].@nom="TARDIVEAU"; 

II est important de comprendre que vous ne modifiez que le contenu de 1' instance XML, 
mais en aucun cas celui du fichier que vous aviez prealablement charge. 



Ajouter un nceud 

Fichiers dereference : Chapitrel3/xmll0.fla et Chapitrel3/cinema.xml 

II existe trois methodes d'ajout d'un nceud a une arborescence XML. En effet, il est 
possible de faire une insertion avant ou apres un nceud specifique ou bien meme apres le 
dernier nceud de 1' instance XML. Les methodes sont les suivantes : 

• insertChildAfterO 

• insertChildBefore( ) 

• appendChi ld( ) 
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Les parametres de ces trois methodes peuvent etre tres divers. Pour ajouter un noeud, une 
astuce consiste a copier l'un des noeuds existants pour conserver sa structure. II ne reste 
plus alors qu'a modifier les valeurs des differents noeuds enfants et des attributs du nceud 
copie. Dans l'exemple suivant, nous copions le premier noeud de l'arborescence a la fin 
de l'instance XML. 

| fichierXML.appendChild(fichierXML.Film[0]); 

Un seul parametre est necessaire : il est inutile de specifier 1' emplacement ou le noeud 
doit etre ajoute dans l'arborescence ; la methode appendChi 1 d( ) l'ajoute automatiquement 
apres le dernier noeud. II faudrait ensuite changer les valeurs des noeuds enfants : 

fichierXML. Film[2] .@nom = "Le pere noel est une ordure"; 
fichierXML.Fi lm[2] . Realisateur = "Jean-Marie POIRE"; 
fichierXML. Film[2] .ActeurPrincipal ="Gerard Jugnot"; 
fichierXML. Film[2] .ActeurPrincipal .@sexe ="F" ; 
fichierXML. Film[2].Annee="1982"; 
fichierXML. Film[2] .Genre = "Comedie"; 
fichierXML. Film [2] . Pay s=" France" ; 

Pour les methodes insertChildAfterO ou insertChildBefore( ), il est necessaire de 
preciser deux parametres. Le deuxieme correspond ni plus ni moins a celui que nous 
venons de voir dans l'exemple precedent, alors que le premier doit specifier un empla- 
cement. Ainsi, les lignes d' instructions ci-dessous font reference au premier noeud de 
l'instance XML. 

IfichierXML.insertChildBefore(fichierXML.Film[0],fichierXML.Film[0]); 
fichierXML.insertChildAfter(fichierXML.Film[l],fichierXML.Film[0]); 



Connaftre le nom d'une balise 

Comme nous l'avons deja evoque, la fonction toXMLStringO est chargee d'afficher les 
balises XML autour de la valeur d'un noeud. 

zoneAffichage.text = fichierXML. Film[l] .Real isateur.toXMLString( ) ; 

Nous obtenons l'affichage ci-dessous en utilisant le fichier ci nema . xml . 

<Realisateur>Steven SODERBERGH</Real isateur> 

II existe egalement une autre fonction, plus precise, qui renvoie uniquement le nom de la 
balise. C'est cette derniere que vous devrez utiliser pour connaitre le nom d'une balise. 

zoneAffichage.text = fichierXML. Film[l] .Real isateur. local Name( ) ; 

Nous obtenons l'affichage ci-dessous : 

Real isateur 
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Connaitre le nombre de nceuds enfants d'un nceud 

La technique, bien qu'elle soit logique, n'est pas des plus evidentes. 

Dans un premier temps, nous devons chercher a recuperer les noeuds enfants d'un nceud 
precis avec la methode chi 1 dren( ). 

zoneAffichage.text = fichierXML.children( ) ; 

Dans un deuxieme temps, nous pouvons utiliser, de facon plus logique, la methode 1 ength ( ) . 

La ligne d'instruction ci-dessous, qui se trouve dans le fichier xml7.fl a, permet de 
connaitre le nombre de nceuds enfants a la racine du document. II y en a quatre. 

zoneAffichage.text = fichierXML.children( ) .length( ) ; 



Remarque 

Pour connaitre le nombre d'attributs contenus dans une balise, il suffit de les stacker dans une instance de 
laclasse XMLListO puis de les compter avec la proprieti lengthO. 



Determiner le numero d'index d'un nceud 

Fichiers dereference de l'exemple 1 : Chapitrel3/xml9.fla et Chapitrel3/cinema.xml 

Afin de comprendre tres simplement et rapidement comment determiner le numero 
d'index d'un nceud, examinons les exemples suivants. 

Exemple 1 

Nous connaissons un nom de film, mais nous souhaiterions connaitre le nom de son reali- 
sateur. Nous avons vu, dans les pages precedentes, qu'une recherche suffisait pour decou- 
vrir toutes les informations relatives a cette production, mais nous desirons connaitre le 
numero de nceud, appele aussi numero d'index, afin d'utiliser la valeur obtenue. 

Ivar numeroNoeud:Number=fichierXML. Film. (@nom=="Mona Lisa Smile") .childlndex( ) ; 
zoneAffichage.text=fichierXML.Film[numeroNoeud] .Real isateur; 

Nous stockons dans une premiere variable, le numero d'index du nceud dont la valeur de 
l'attribut nom est Mona Lisa Smile. Nous utilisons ensuite la valeur obtenue comme para- 
metre pour pointer vers un nceud precis (Film[numeroNoeud]). 

Exemple 2 

Le fichier f ranee. xml contient 22 nceuds a la racine (car il y a 22 regions francaises) qui 
regroupent des noeuds enfants dont les noms de balises sont Departement. Nous souhaite- 
rions savoir quel est le nom du departement qui porte le numero 28. Voici la ligne 
d'instruction correspondante : 

f i chi erXML. Region. Departement. (@numero==28) .@nom; 
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Et maintenant, comment pouvons-nous connaitre le numero d' index du noeud parent, qui 
fait partie des 22 noeuds ? Voici la reponse. 

fichierXML.Region.Departement. (@numero==28) .pa rent ( ) .childlndex( ) ; 

Nous avons remplace l'attribut @nom par parent( ) car nous souhaitons remonter d'un niveau, 
mais nous ne cherchons pas a exploiter des donnees contenues dans le nceud. Nous 
souhaitons remonter au niveau du noeud parent, car nous voulons seulement connaitre le 
numero d'index de ce dernier. Nous utilisons alors la methode childlndexO. Ainsi, la 
valeur renvoyee est bien le chiffre 6, dans cet exemple. 



Tableau de synthese 

Voici un tableau recapitulatif des principales lignes d' instructions a retenir. Nous avons 
fait appel au fichier f ranee .xml . 

Le script initial dans lequel se trouvent ces lignes d' instructions est le suivant : 

var fichierXML:XML; 

var chargeurDonnees:URLLoader = new URLLoadert ) ; 

var adresseFichierXML:URLRequest = new URLRequestC'france.xml ") ; 

function onComplete(event:Event) :void { 

fichierXML = new XML(chargeurDonnees.data) ; 

trace(fichierXML) ; //Remplacez fichierXML par l'un des exemples du tableau ci-dessous 
} 

chargeur Donnees. load( ad resse FichierXML) ; 
chargeur Donnees. add Event Listener (Event. COMPLETE, onComplete) ; 

Le fichier tableausynthese.fi a contientles fonctions traceO quiontpermis d'obtenirces 
resultats. 



Parametre de la fonction trace() 
du script ci-dessus 


Resultat 


Description 


fichierXML 


Consultez le paragraphe place apres ce 
tableau. 


Lire tout le contenu d'un 
document XML 


fichierXML. Region[20] 


Consultez le paragraphe place apres ce 
tableau. 


Lire un nceud (premier 
exemple) 


fichierXML. Region [20]. Population. 
*»Annee[2] 


4 750 947 


Lire un nceud (deuxieme 
exemple) 


f ichierXML. Region [20] ,@nom 


Provence-Alpes-Cote d'azur 


Lire un attribut (premier 
exemple) 


fichierXML. Reg ion [20] . Departement[l] . 
*»@nom 


Hautes-Alpes 


Lire un attribut (deuxieme 
exemple) 


fichierXML. Region [20]. Population. 
^Annee 


<Annee numero="1990">4 257 907</Annee> 
<Annee numero="1999">4 506 151</Annee> 
<Annee numero="2005">4 750 947</Annee> 
<Annee numero="2006">4 780 989</Annee> 


Lire tous les nceuds 
enfants d'un nceud 
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Parametre de la fonction trace() 
du script ci-dessus 


Resultat 


Description 


fichierXML. Region. (@nom== 
*»"Provence-Alpes-C6te d'azur") 


Meme resultat que la deuxieme ligne de ce 
tableau. 


Rechercher un nceud en 
fonction d'un attribut 
donne. 


fichierXML. Region. Population.Annee. 
*(@numero==1990) 


Renvoie 22 lignes correspondants aux 
annees 1990 

<Anneenumero="1990">1 624 372</ 
Annee> 

<Annee numero="1990">5 350 701 </ 
Annee> 


Rechercher des nceuds 
en fonction d'un attribut 
donne. 


zoneAffichage.text - 
fichierXML.Film.(Annee==2007) 


Cet exemple ne peut s'appliquer au docu- 
ment f ranee. xml carles nceuds Depar- 
tement ne contiennent pas de valeurs. 


Rechercher un nceud 


fichierXML. Region.Departement. 
*»(@nom.substr(0,l)=="A" && @numero<=6) 


Nous recherchons les noms de departement 
qui commencent par la lettre A et dont le 
numero de departement est inferieur ou egal 
a 6. 


Recherche multicritere 


fichierXML. Region[0] .Population. 
*Annee[2] = "0" 




Modifier la valeur d'une 
balise 


fichierXML. Region[0] .@nom="Alzasse" 




Modifier la valeur d'un 
attribut 


fichierXML. Region.Departement[l] . 
*»local Name( ) 


Departement 


Connaitre le nom d'une 
balise 


fichierXML. Region [3] .child rent ) . 
*length()-l 


Dans notre exemple, nous retirons 1 a la 
valeur renvoyee par la methode 1 ength( ) 
car le dernier nceud n'est pas un departe- 
ment. 


Connaitre le nombre de 
nceuds enfants d'un noeud 


fichierXML. Film. (@nom=="Mona 
*»Lisa Smile" ) .childlndex( ) 


Nous recherchons le numero d'index en fonc- 
tion du resultat d'une recherche sur la valeur 
d'un attribut. 


Connaitre le numero 
d'index d'un noeud. 


fichierXML.appendChild( fichierXML. 
*Film[0]); 


Ajoute, a la fin de I'instance XML, un nceud 
dont le contenu est celui qui correspond au 
premier nceud du document. 


Inserer un nceud a la fin 
de I'instance XML. 


fichierXML. insertChildBefore(fichierXM 
L.Film[5], fichierXML. Film[0]) 


Insere le premier nceud de I'arborescence 
(en tant que modele) avant le cinquieme 
nceud du document XML. 


Inserer un nceud avant un 
autre. 
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Les resultats retournes par les deux premieres lignes de ce tableau sont trop longs pour 
tenir dans une cellule du tableau : f i chi erXML renvoie l'integralite du document alors que 
fichierXML.Region[20] renvoie les informations ci-dessous : 



<Region nom="Provence-Al pes-C6te d'azur"> 

<Departement nom="Alpes de Hautes-Provence" numero="4" prefecture="Digne 
<Departement nom="Hautes-Alpes" numero="5" prefecture="Gap"/> 
<Departement nom="Alpes-Maritimes" numero="6" prefecture="Nice"/> 
<Departement nom="Bouches-du-Rhone" numero="13" prefecture="Marseil le" 
<Departement nom="Var" numero="83" prefecture="Toulon"/> 
<Departement nom="Vaucluse" numero="84" prefecture="Avignon"/> 
<Popul ation> 

<Annee numero="1990">4 257 907</Annee> 

<Annee numero="1999">4 506 151</Annee> 

<Annee numero="2005">4 750 947</Annee> 

<Annee numero="2006">4 780 989</Annee> 
</Population> 
</Region> 
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La gestion du texte 



Lorsque nous entendons parler de Flash, nous pensons tout de suite a 1' animation a base 
d'interpolations, au son, a la video, aux images, au dessin vectoriel, a 1'ActionScript, mais 
plus rarement au texte. 

Depuis tres longtemps, cette notion est plus ou moins negligee. II suffit d'ailleurs de 
consulter les programmes de formation des nombreux etablissements qui proposent des 
stages sur 1'ActionScript pour s'apercevoir que cette notion est souvent traitee de facon 
incomplete, voire pas du tout. Et pourtant, avec revolution croissante et importante de 
1'ActionScript dans Flash, les possibilites de developpement sont de plus en plus grandes. 
La gestion du texte dans une animation joue done un role important car elle se traduit par 
de nombreuses possibilites : 

• la creation dynamique d'un texte sur la scene ; 

• sa mise en forme ; 

• la surveillance d'une zone de texte de saisie. 

Ces trois notions regroupent de nombreuses techniques de manipulation du texte qui 
permettent de gagner du temps en developpement. Malheureusement, seuls les deve- 
loppeurs aguerris savent gerer correctement ce media. 



Remarque 

II est a noter que toutes les proprietes abordees dans ce chapitre sont valables pour les textes crees direc- 
tement sur la scene a I'aide de I'outil dedie (outil Texte) ainsi que pour les textes crees dynamiquement a 
I'aide de la classe Text Fi el d ( ) . 



ActionScript 3 - Programmation sequentielle et orientee objet 



Si vous n'avez aucune notion de typographic, nous vous recommandons fortement 
la lecture de cette page Web, tres claire et tres explicite : http://www.blaco.ch/ 
Pages_prepresse/Un_peu_de_typo.htm. 



Creer un texte dynamiquement 

II parait generalement evident de devoir importer dynamiquement (en AS) une image sur 
la scene, mais la creation d'un texte semble moins automatique. Pour preuve, nombreux 
sont les developpeurs qui transforment un texte dynamique sur la scene en symbole afin 
de pouvoir placer ce dernier en ActionScript. Cela permet, en effet, d'eviter la program- 
mation de 1' incorporation d'une police de caracteres et la mise en forme du texte. Cependant 
cette technique est moins souple que ce que vous allez pouvoir lire dans ce chapitre. 

Pour creer un texte en ActionScript, la technique est extremement simple : il suffit de 
creer une instance de la classe TextFieldO puis de faire appel a la propriete text pour 
definir son contenu. Bien sur, terminez le script par un ajout de cette nouvelle instance a 
laliste d'affichage. 

Fichier de reference : ChapltreU/textel.fla 

Ivar messageAccueil :TextField = new TextFieldO; 
messageAccueil .text = "Bonjour"; 
addChi Id (messageAccueil ) ; 

ou dans un fichier externe intitule main. as et Chapitrel4/texte2.fla 

package { 

import flash. text. TextField; 
import flash. display. Sprite; 

public class main extends Sprite { 

public var messageAccueil :TextField; 

function main( ) { 

messageAccueil = new TextFieldO; 

messageAccueil .text = "Bonjour"; 

addChi Id (messageAccueil ) ; 
} 



Remarque 

Dans la pratique, lorsque vous aurez besoin de travailler du texte en ActionScript, il sera tout de meme 
plus judicieux de creer une classe dediee. Consultez le dernier developpement (Instanciation de classes 
personnalisees) du chapitre 6 ; vous y decouvrirez un exemple. 
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Quelques mots sur les pages de ce chapitre 

Comme nous Pevoquions quelques lignes plus haut, toutes les proprietes abordees dans 
ce chapitre sont valables pour les textes crees directement sur la scene ainsi que pour les 
textes crees dynamiquement a l'aide de la classe TextFielcK ). Dans le cas ou vous cree- 
riez votre propre texte sur la scene en lui donnant pour nom celui qui figure devant 
l'instruction :TextField = new TextFielcK ) ; de chaque exemple, vous pourriez alors vous 
passer de saisir les trois lignes ci-dessous : 

var titreAccueil :TextField = new TextFielcK); 
titreAccueil .text = "Yazo"; 
addChilcK titreAccueil ) ; 

A P execution des lignes d' instructions contenues dans tous les exemples de ce paragra- 
phe, quelle que soit la methode (approche POO ou programmation sequentielle), il faut 
reconnaitre que Papparence du texte par defaut n'est pas tres agreable a lire. C'est tout a 
fait normal car nous ne Pavons pas formate. En ce qui concerne sa position sur la scene, 
c'est a vous de faire appel aux proprietes x et y pour le placer precisement. 

ImessageAccueil .x = 30; 
messageAccueil .y = 20; 

Stocker un nombre dans un texte dynamique 

Pour placer un contenu dans un texte dynamique ou un texte de saisie, vous avez pu constater 
que la technique est extremement simple : il suffit de faire reference a la propriete text. 

En revanche, un probleme se pose lorsque vous souhaitez placer un nombre dans un texte 
dynamique, car Pinstance est typee naturellement. En effet, Pexecution des lignes 
d' instructions ci-dessous entraine une erreur de compilation. 

var titreAccueil :TextField = new TextFieldO; 

titreAccueil .text = 30; 

addChild(titreAccueil ) ; 

1067: Contrainte implicite d'une valeur du type int vers un type sans rapport String. 



I 



Cela signifie que vous essayez de stocker un nombre dans la variable ti treAccuei 1 qui est 
de type Stri ng (texte) et qui attend done une variable de ce type. 

Pour remedier a ce probleme, vous disposez d'une solution qui consiste a placer la valeur 
a stocker entre guillemets. 

var titreAccueil :TextField = new TextFieldO; 
titreAccueil .text = "30"; 
addChild( titreAccueil ) ; 



Remarque 

Si vous aviez besoin de recuperer la valeur stockee dans I'instance de type texte intitulee ti treAccuei 1 dans 
le but d'effectuer un calcul, il faudrait alors faire une conversion en utilisant la classe Number ( ) , comme : 
trace( Number (titreAccueil .text)*3) ; 
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Methode toString() 

Si la valeur a stacker resulte d'un calcul ou de la lecture d'une propriete ou d'une variable, 
vous devez dans ce cas utiliser la methode toStMngO. 

var positionJoueur:TextField = new TextFieldO; 
positionJoueur.text = joueur. x. toStringO ; 
addChild(positionJoueur) ; 

Dans cet exemple, nous cherchons a stacker un nombre de pixels (renvoye par la 
propriete x de l'instance joueur) dans l'instance d'un TextFieldO. L'adjonction de la 
methode toString( ) permet de convertir le resultat renvoye par la lecture de joueur. x. 

Methode appendText() contre += 

Lorsque vous tenterez de faire des concatenations de texte, il est fortement conseille par 
Adobe de ne pas utiliser l'operateur += comme vous aviez eventuellement l'habitude de 
le faire en AS1/2. Favorisez l'usage de la methode appendTextt ). 

points .appendTextC - Meilleur score"); 

Vous auriez ecrit en AS 1/2 : 

I points+=" - Meilleur score"; 

Les proprietes de la classe TextFieldO 

II serait tres simple et plus rapide de vous presenter un tableau de synthese avec toutes les 
methodes et les proprietes les plus utiles de la classe TextFieldO, mais cela ne servirait a 
rien car ce point est bien traite dans la documentation. Nous allons plutat mettre en avant 
les proprietes que vous devez absolument connaitre pour pouvoir gerer correctement un 
texte dans une animation Flash et vous proposer un exemple et son contexte. 

Regler la couleur du fond 



Remarque 

II est a noter que cette propriete est valable egalement pour les textes crees directement sur la scene a 
I'aide de I'outil dedie (outil Texte). 



L' attribution d'une couleur de fond passe par deux lignes d' instructions. En effet, vous devez 
toujours commencer par activer la visualisation d'un fond de texte. Sans cette premiere 
etape, vous pouvez toujours essayer de changer la couleur, aucun effet se produira. 

var titreAccueil :TextField = new TextFieldO; 
titreAccueil .text = "Yazo"; 
titreAccueil .background = true; 
titreAccueil .backgroundColor = 0xFF6666; 
addChildt titreAccueil ) ; 
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L' attribution d'une couleur de fond s'avere indispensable lorsque vous placez un texte 
de saisie sur la scene, alors qu'aucune mise en evidence n'a ete prevue dans la charte 
graphique. 

Vous pouvez egalement vous contenter de regler la valeur de la propriete background a 
true sans pour autant definir une couleur de fond ; dans ce cas, vous obtiendrez du blanc. 

L' application d'une couleur de fond s'effectue generalement sur un texte de saisie, mais 
plus rarement sur un texte dynamique. 

Regler la couleur du contour 

Comme nous venons de le voir pour 1' attribution d'une couleur de fond, pour appliquer 
un contour a un texte de saisie ou un texte dynamique, il est necessaire de faire appel a 
deux lignes d' instruction. La premiere sert a activer la visualisation d'un contour de 
texte. Sans cette premiere etape, vous pouvez toujours essayer de changer la couleur de 
contour, aucun effet se produira. 

var titreAccueil :TextField = new TextFieldO; 
titreAccueil .text = "Yazo"; 
titreAccueil .border = true; 
titreAccueil .borderColor = 0xFF6666; 
addChildttitreAccueil ) ; 

L' attribution d'une couleur de contour s'avere indispensable lorsque vous placez un texte 
de saisie sur la scene, alors qu'aucune mise en evidence n'a ete prevue dans la charte 
graphique. Elle peut remplacer ou accompagner une couleur de fond. 

Si vous reglez la valeur de la propriete border a true sans pour autant definir de couleur 
de contour, celle-ci sera noire par defaut. 



Astuce 

Lorsque vous construisez une interface avec plus ou moins de texte, il est conseille d'activer la propriete 
border afin de visualiser les differentes zones de type texte. Cela peut notamment vous permettre de 
comprendre les problemes d'alignements rencontres. 



Regler la couleur du texte 

Vous decouvrirez, plus loin dans ce chapitre, la possibility de mettre un texte en couleur 
avec la classe TextFormatt ), mais vous pouvez d'ores et deja le faire plus simplement avec 
la propriete textColor de la classe TextFieldO. 

var titreAccueil :TextField = new TextFieldO; 
titreAccueil .text = "Yazo"; 
titreAccueil .textColor = OxOOOOAA; 
addChild(titreAccueil ) ; 

Si vous combinez cette mise en couleur du texte avec la methode setTextFormat( ) de la 
classe TextFormatt. ), sachez que l'effet produit est celui de la derniere ligne d'instruction 
executee. La propriete textColor de la classe TextFieldO n'a done pas la priorite sur la 
propriete col or de la classe TextFormatt ) et reciproquement. 
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Regler automatiquement la largeur d'un texte 

Lorsqu'un texte est plus grand que la largeur de l'instance dans laquelle il se trouve, il est 
possible de specifier un retour automatique a la ligne. Dans certains cas, cela s'avere 
inutile, car ce n'est pas ce que nous souhaitons. 

Lorsque vous creez une instance de la classe TextFieldO, vous pouvez lui definir une 
largeur avec la propriete width, mais ce n'est pas obligatoire, notamment dans le cas ou 
vous souhaitez creer un titre, ou tout du moins un texte sur une ligne, avec un corps assez 
important. 

Pour ne pas avoir a gerer la largeur d'une instance de type TextFi el d( ), vous pouvez utiliser 
la propriete autoSize. 

Specifiez dans votre code, le type de redimensionnement (TextFieldAutoSize.NONE, Text- 
Fi el dAutoSize. LEFT, TextFieldAutoSize. RIGHT, TextFieldAutoSize. CENTER) ; il sera alors 
inutile de faire appel a la propriete wordwrap. Voici un exemple de texte dont le redimen- 
sionnement s'effectue automatiquement a gauche. 

var semaine:Array = new ArrayC'Lundi 30 fevrier 2017" , "Mardi , le jour le plus long", 
*»"Mercredi " , "Jeudi " , "Vendredi " ."Samedi " , "Dimanche") ; 
var titreAccueil :TextField = new TextFieldO; 

titreAccueil .autoSize = TextFieldAutoSize. LEFT; 

for each (var jour:String in semaine) { 

titreAccueil . appendText( jour+"\n") ; 
} 

addChi 1 d ( titreAccueil ) ; 

Attention de ne pas combiner ce reglage avec la propriete wordwrap, car cette derniere 
annule la definition de propriete autoSize. 



Remarque 

Appliquez un contour de texte (nomInstanceTexte.border=true) pour visualiser le resultat du redi- 
mensionnement automatique d'une instance de Text Fi el d ( ) . 



Gerer un texte multiligne 

La gestion d'un texte multiligne sous-entend deux problematiques a resoudre. 

• La premiere est relative a l'insertion d'un saut de ligne entre deux donnees. Vous allez 
pour cela devoir utiliser la sequence \n. 

• La deuxieme est relative au renvoi du texte a la ligne suivante lorsqu'il est trap large. 

Examinez bien la copie d'ecran de la figure 14-1 : nous y mettons en evidence le retour a 
la ligne. 
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jndi30feVrier201 
ii. lcjour Icplu: 
Mercredi 
Jeudi 
Vendredi 
Samedi 
Dimanche 





Lundi 30 fevrier 

2017 

Mardi, lejourle 

plus long 

Mercredi 

Jeudi 

Vendredi 

Samedi 



Figure 14-1 

Avec et sans V utilisation de la propriete wordwrap 

Si nous ne specifions aucun reglage dans notre programme, un texte plus grand que la 
largeur de l'instance du TextField( ) dans laquelle il se trouve entraine une rupture de la 
lecture. Le texte est tronque. C'est le cas dans la colonne de gauche de la copie d'ecran 
de la figure 14-1. Pour obtenir un renvoi automatique d'une phrase a la ligne suivante, 
nous devons utiliser la propriete wordwrap et la regler a true. 



Note 

Consultez le chapitre 10 dedie aux boucles for( ) si vous ne connaissez pas les iterations. 



var semaine:Array = new Array( "Lundi 30 fevrier 2017" , "Mardi . le jour le plus long", 
* "Mercredi " , "Jeudi " ."Vendredi " , "Samedi " , "Dimanche") ; 
var titreAccueil :TextField = new TextFieldO; 

titreAccueil .wordwrap = true; 

for each(var jounString in semaine) { 

titreAccueil . appendText( jour+"\n") ; 
} 

addChild(titreAccueil ) ; 

Revenons sur un detail qui ne vous aura siirement pas echappe : la presence de la sequence 
que nous evoquions en introduction, \n. 

Pour pouvoir renvoyer une donnee a la ligne, nous la concatenons a l'aide de l'operateur + 
suivi de la sequence \n. 



Remarque 

Pour les utilisateurs de l'AS2, vous remarquerez I'emploi de la nouvelle methode appendText( ) qui est 
preconise par Adobe, au lieu de l'operateur +=. 
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Empecher la selection d'un texte dynamique 



Lorsque vous creez un texte dynamiquement, vous pouvez, par defaut, selectionner son 
contenu sur la scene. Pour eviter cela, ce qui entrainera egalement l'annulation du chan- 
gement de curseur lors d'un survol du texte, vous devez utiliser la propriete sel ectabl e. 

var titreAccueil :TextField = new TextFieldO; 
titreAccueil .text = "Yazo"; 
titreAccueil .selectable = false; 
addChildttitreAccueil ) ; 

Veillez a ne pas commettre l'erreur d'appliquer cette propriete a un texte de saisie ! 

Regler le type de texte (saisie ou dynamique) 

Lorsque vous creez un texte sur la scene, vous pouvez choisir entre les types dynamique, 
statique et de saisie. 

Rappelons qu'un texte de type dynamique permet de placer, sur la scene, une zone dans 
laquelle le contenu va pouvoir etre modifie avec 1' ActionScript. Comme son nom l'indi- 
que, un texte de saisie donne a l'utilisateur la possibility de saisir un texte directement 
dans l'interface de votre animation. Lorsque vous proposez la saisie d'un nom, d'un 
prenom, d'une adresse, d'un e-mail, etc., il s'agit d'un texte de saisie. 

Par defaut, lorsque vous executez simplement les lignes d' instructions ci-dessous, un texte 
est de type dynamic. 

I var titreAccueil :TextField = new TextFieldO; 
titreAccueil .text = "Yazo"; 
addChildttitreAccueil ) ; 

Pour changer le type d'un texte, il vous suffit tout simplement d'utiliser la propriete type 
et de specifier l'une des deux constantes suivantes : 

• TextFieldType. INPUT 

• TextFieldType. DYNAMIC 

Vous devriez obtenir le script suivant : 

var titreAccueil :TextField = new TextFieldO; 

titreAccueil .width = 200; 

titreAccueil .text = "Veuillez saisir votre prenom"; 

addChildttitreAccueil ) ; 

titreAccueil .type = TextFieldType. INPUT; 

Cacher les caracteres d'un mot de passe 

Pour certaines zones de texte, il est necessaire de masquer la saisie de l'utilisateur. C'est 
notamment le cas pour un mot de passe. Vous devrez alors specifier la valeur de la 
propriete displayAsPassword a true. 

var titreAccueil :TextField = new TextFieldO; 

titreAccueil .border = true; 
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titreAccueil .width = 150; 
titreAccueil .height = 20; 

titreAccueil .displayAsPassword = true; 
titreAccueil .type = TextFieldType. INPUT; 

addChild(titreAccueil ) ; 

Dans cet exemple, nous avons decide d'appliquer un contour a l'instance de type Text- 
FieldO, ce qui indique a l'utilisateur l'endroit dans lequel il doit cliquer pour saisir un 
mot de passe. 

Determiner et controler les caracteres contenus dans un texte 



Le nombre de caracteres contenus dans une chaine 

Pour determiner le nombre de caracteres contenus dans un texte dynamique ou un texte 
de saisie, utilisez la propriete length. 

trace (titreAccueil .length) ; 

Le nombre maximum de caracteres 

En revanche, si vous souhaitez limiter le nombre de caracteres qu'un utilisateur peut 
saisir dans un texte de type input (texte de saisie), utilisez la propriete maxChars. 

var titreAccueil :TextField = new TextFieldO; 

titreAccueil .border = true; 

titreAccueil .maxChars = 5; 

titreAccueil .type = TextFieldType. INPUT; 

addChild(titreAccueil ) ; 

L' usage de cette propriete s'avere bien souvent indispensable pour controler la saisie de 
l'utilisateur lorsqu'il est invite a indiquer une date, un code postal, un numero de tele- 
phone, etc., dans 1' interface de 1' animation. Toutes ces informations sont effet souvent 
formatees avec un nombre de signes bien defini. 

Restreindre la saisie a certains caracteres 

Dans les exemples ci-dessous, nous pouvons facilement comprendre qu'un utilisateur ne 
doit pas saisir des lettres dans un code postal ou dans un numero de telephone. A l'inverse, 
dans une zone ou l'utilisateur est invite a saisir un prenom ou un nom, les chiffres ne 
peuvent etre acceptes. La syntaxe de la ligne d' instruction a utiliser pour une telle contrainte 
est tres simple. Examinez le script ci-dessous : 

I var codePostal :TextField = new TextFieldO; 
codePostal .border = true; 



ActionScript 3 - Programmation sequentielle et orientee objet 



codePostal .type = TextFieldType. INPUT; 
codePostal .maxChars = 5; 
codePostal .restrict = "0-9"; 



addChildtcodePostal ); 

Nous avons fait appel a la propriete restri ct et nous avons indique la plage des caracteres 
autorises. Ainsi, pour n'autoriser que des caracteres, nous aurions pu ecrire : "A-Z" ou "a-z" 
ou encore "A-z a-z". 



Remarque 

Si vous contraignez la saisie d'un texte en minuscules ("a-z") et si I'utilisateur tape des majuscules, les 
caracteres seront automatiquement convertis en minuscules. 



Pour exclure certains caracteres, vous devez utiliser le caractere A suivi du signe typo- 
graphique ou de la plage de caracteres a supprimer. 

L'exemple ci-dessous autorise I'utilisateur a saisir tous les caracteres minuscules de a a z 
a 1' exception de la lettre y. 

codePostal .restrict = "a-z A y"; 

Dans cet autre exemple, tous les caracteres minuscules de a a z peuvent etre saisis a 
1' exception des lettres r, s et t. 

codePostal .restrict = "a-z A r-t"; 

Consultez le developpement suivant pour decouvrir que la casse d'une chaine de caracteres 
peut etre modifiee. 

Manipuler une chaine de caracteres 

Cette partie du chapitre 14 est extremement importante car elle va vous apprendre a effectuer 
des recherches dans une chaine de caracteres sans etre oblige d' utiliser les expression 
regulieres. De plus, vous allez decouvrir comment manipuler partiellement des chaines 
de caracteres. Ajoutons simplement que les methodes et proprietes qui vont suivre appar- 
tiennent a la classe StrlngO. 

Avant que nous developpions davantage d'autres propos, precisons que pour utiliser les 
methodes de cette classe, vous n'etes pas oblige d'instancier la classe StrlngO avec 
l'operateur new. Vous pouvez tout aussi bien vous contenter de typer une variable de la 
facon suivante : 

var prenom_txt: String = "David"; 
Dans le cas ou vous prefereriez utiliser le mot-cle new, voici comment vous procederiez : 

var prenom_txt: String = new StringC'David") ; 
II est egalement possible d'utiliser la meme ligne d'instruction ci-dessus sans l'operateur new. 
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Changer la casse d'un texte 

Vous aurez parfois besoin de changer la casse d'un texte de minuscules en majuscules et 
inversement. La propriete restri ct peut convertir un affichage de caracteres dans la casse 
de votre choix, mais uniquement lors de la saisie d'un texte de la part de l'utilisateur. 
Nous allons maintenant decouvrir deux methodes de la classe StringO qui peuvent 
convertir la casse d'un texte a posteriori. 

• toUpperCase( ) pour basculer l'afnchage de caracteres en majuscules ; 

• toLowerCase( ) pour basculer l'afhchage de caracteres en minuscules. 

Vous remarquerez que les deux noms employes sont accompagnes de parentheses car il 
s'agit de methodes et non de proprietes. Dans l'exemple ci-dessous, nous affichons dans 
un texte sur la scene une chaine de caracteres composee d'une concatenation comprenant 
une conversion a l'aide de la methode toUpperCaseO. 

affichageMessage.text = "Votre reponse, "+reponse.text.toUpperCase( )+" , est bonne"; 

Lorsque vous devrez comparer le contenu d'un texte de saisie avec une variable ou une 
chaine de caracteres, si vous ne souhaitez pas que cette comparaison soit sensible a la casse, 
vous ferez alors appel a l'une de ces deux methodes (toUpperCase( ) ou to LowerCase( )). 

if (reponse. text. toUpperCase( )==" PARIS" ) point sGeneraux++; 

Dans cet autre exemple, l'utilisateur n'a pas a se soucier de la casse du texte qu'il a saisi : 
une conversion automatique est effectuee. 

var reponse:TextField = new TextFieldO; 

reponse. border = true; 

reponse. height = 20; 

reponse. width = 150; 

reponse. type = TextFieldType. INPUT; 

addChild(reponse) ; 

reponse. add Event Listener (Event. CHANGE, basculerMajuscule) ; 

function basculerMajuscule (evt:Event) { 

reponse. text = reponse. text. toUpperCase( ) ; 
} 

Vous remarquerez que nous avons utilise un ecouteur gerant l'evenement Event. Consul- 
tez le developpement intitule Gerer les evenements lies au texte, dans les dernieres pages 
de ce chapitre, pour avoir une approche globale du probleme. 

Si vous connaissez la propriete restrict de la classe TextFieldO, vous ne trouverez peut- 
etre pas cet exemple pertinent. Voici une variante du script ci-dessus qui permet de basculer 
partiellement l'affichage d'un texte avec une majuscule en debut de mot et le reste en 
minuscules. 

var prenom:TextField = new TextFieldO; 
var longeurChaine:Number; 
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prenom. border = true; 

prenom. height = 20; 

prenom. width = 150; 

prenom. type = TextFieldType. INPUT; 

addChild(prenom) ; 

prenom. add Event Listener (Focus Event. FOCUS_IN,basculerMajuscule) ; 

function basculerMajuscule (evtrEvent) { 

longeurChaine = prenom. length; 

prenom. text = prenom. text. substr(O.l) .toUpperCase( Hprenom.text. 

**substr(l, longeurChaine) .toLowerCase( ) ; 
} 

Que l'utilisateur saisisse son nom integralement en majuscules ou en minuscules, une 
majuscule viendra toujours se placer en debut de texte. 

Verifier la presence d'une chaine de caracteres dans un texte 

II sera parfois necessaire de verifier la presence d'un ou plusieurs caracteres dans un texte 
de saisie, un texte dynamique ou une variable. Imaginons que vous invitiez l'utilisateur a 
saisir son adresse e-mail : vous devez vous assurer que les signes typographiques arobase 
et point ont ete saisis. Vous devrez alors faire appel a la methode indexOf qui renvoie 
soit le numero d'index du caractere rencontre (ou le premier caractere d'une chaine 
recherchee) soit la valeur -1 si rien n'a ete trouve. 

var adressemail :String = "david@yazo.net"; 
trace(adressemail . indexOf ("@" ) ) ; 



5 

var adressemail :String = "david@yazo.net"; 

trace (adressemail .indexOf ("$" ) ) ; 

-1 



var adressemail :String = "david@yazo.net"; 

trace (adressemail .indexOf (" . " ) ) ; 

10 

var adressemail rString = "david@yazo.net"; 

trace (adressemail .indexOf ("yazo")) ; 



Nous rappelons que le premier caractere d'une chaine porte l'index ; c'est pourquoi 
nous ob tenons les valeurs 5, 6 et 10 et non pas 6, 7 et 11. 

En conclusion, lorsque vous cherchez a savoir si un caractere ou une chaine est contenu 
dans un texte, testez uniquement l'inegalite avec la valeur -1. 

var adresseVal ide:Boolean; 

var adressemail :String = "david@yazo.net"; 

if (adressemail .indexOf ("@") !=-l) { 

adresseVal ide=true; 

trace (adresseVal ide) ; 
} 
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Remarque 

Comme nous I'evoquions precedemment, pour valider correctement une adresse mail, vous devez vous 
assurer de la presence d'un point. Dans un souci de simplification du code et pour une meilleure compre- 
hension, nous avons simplement verifie la presence de I'arobase. Consultez eventuellement le chapitre 9 
pour de plus amples informations sur les tests conditionnels multiples. 



Remplacer un texte par un autre 

Dans certains cas, vous aurez besoin de supprimer une portion de texte pour la remplacer 
par une autre. Cette manipulation s'effectue tres simplement a l'aide de la methode 
repl aceText( ). Indiquez simplement la plage de caracteres a remplacer ainsi que le texte 
de remplacement, que vous passerez egalement en parametre de la fonction. 

Izonelnfo.text = "La pedagogie est une qualite qui s'acquiere faci lenient. " ; 
zone Info. repl aceText( 44,54, "difficilement" ) ; 

La valeur 44 correspond au 44 e caractere depuis le debut du texte contenu dans l'instance 
zonelnfo en commencant a compter a partir de et non 1. En revanche, le chiffre 54 ne 
correspond pas au nombre de caracteres a remplacer dans l'instance, mais au numero du 
caractere de fin de la plage de texte a remplacer. Contrairement au premier parametre, il 
faut compter le premier caractere de la chaine a partir de 1 . 



Autre methode 

Vous pouvez egalement utiliser la methode repl aceSel ectedText( ) pour remplacer un texte selectionne. 



Mettre en forme un texte avec la classe TextFormatQ 

Si vous avez lu ce chapitre depuis le debut, vous avez pu constater que la classe Text- 
Fiel d( ) possede deja de nombreuses proprietes et methodes qui permettent de mettre un 
texte en forme. Cependant, ces differents reglages s'appliquent principalement a l'enve- 
loppe du TextField et non au texte contenu dans ce contenant (a l'exception de la 
propriete textColor). Le tableau 14-3 situe a la fin de ce chapitre vous permettra de verifier 
cette affirmation. 

Pour mettre un texte en forme avec plus de precision (interlettrage, soulignement, retrait 
de la premiere ligne d'un paragraphe, alignement, choix de la police, etc.), nous devons 
faire appel a la classe TextFormat( ). 

Pour commencer, vous devez comparer l'utilisation d'une instance de la classe TextFormat( ) 
avec une feuille de styles. Le fonctionnement est analogue, car vous definissez des valeurs 
assignees a des attributs sous une etiquette generate, puis vous l'appliquez avec la methode 
setTextFormatO de la classe TextFieldO. Le script ci-dessous correspond aux lignes 
d' instructions minimales que vous devez utiliser pour faire appel a cette classe. Nous 
instancions la classe, nous definissons une propriete puis nous appliquons le style. 
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var stylePerso:TextFormat = new TextFormatt ; 

stylePerso. size=18; 

nomduntextfi el d.setText Format (stylePerso) ; 



Cet exemple sous-entend qu'un texte dynamique ou un texte de saisie se trouve sur la 
scene et s'intitule nomduntextfi eld. Vous pouvez des lors ajouter autant de proprietes que 
vous le souhaitez. 



Mise en forme dun texte de saisie 

Pour appliquer un style par defaut a un texte saisi par I'utilisateur, utilisez la propriete def aul tTextFormat 
comme dans I'exemple ci-dessous : 

var stylePerso:TextFormat = new TextFormatt ) ; 

stylePerso. size = 14; 

stylePerso. bold = true; 

nomutil isateur.defaul tTextFormat = stylePerso; 



Le premier exemple que nous allons aborder, se contente de regler la taille d'un texte et son 
alignement. La zone de texte possede la meme largeur que celle de la scene (500 pixels). 
Ainsi, en demandant un alignement centre, le texte se trouvera au centre de 1' animation. 

Fichier de reference : Chapitrel4/texte5.fla 

var titreAccueil :TextField = new TextFieldO; 
titreAccueil .text = "Accueil"; 
titreAccueil .y = 20; 
titreAccueil .width = 500; 

var styleTitreAccueil :TextFormat = new TextFormat( ) ; 
styleTitreAccueil .al ign=" center" ; 
styleTitreAccueil . size=24; 

titreAccueil . setText Format (styleTitreAccueil ) ; 

addChildt titreAccueil ) ; 

Ce dernier exemple fait appel a deux proprietes souvent utilisees : la couleur d'un texte et 
l'interlettrage. Nous n'approfondirons pas, dans cet exemple, l'usage de cette classe, car 
la fin de ce chapitre fait reference a de nombreuses situations qui gerent les proprietes les 
plus utilisees de la classe TextFormat( ). 

Fichier de reference : Chapitrel4/texte6.fla 

var titreAccueil :TextField = new TextFieldO; 
titreAccueil .text = "Accueil"; 
titreAccueil .x = 20; 
titreAccueil .y = 20; 
titreAccueil .width = 200; 

var styleTitreAccueil :TextFormat = new TextFormat( ) ; 
styleTitreAccueil . color=0x474763; 
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StyleTitreAccueil .letterSpacing =5; 
titreAccueil . setText Format (styleTitreAccueil ) ; 

addChild(titreAccueil ) ; 

Nous vous conseillons de consulter le dernier developpement intitule Instanciation de 
classes personnalisees du chapitre 6 ; il presente la gestion de la classe Text Format () a 
travers une classe externe. 



Mettre en forme une plage de caracteres 

Dans le texte ci-dessous, nous aimerions mettre uniquement le nom de l'auteur de cette 
citation en gras. 

« Un bon maitre a ce souci constant : enseigner a se passer de lui. ». Andre GIDE. 

Nous devons done creer une instance de la classe TextFormat( ) et definir les valeurs des 
proprietes a utiliser. Nous faisons ensuite appel a la methode setTextFormat( ) de la classe 
TextFieldO en ajoutant des parametres que nous n'avions pas encore utilises pour le 
moment : le debut et la fin de la mise en forme du texte. Tous deux s'expriment en 
nombre de caracteres (avec une petite difference). 

citati on. setText Format (styleAuteur, 68, 78) ; 

La valeur 68 correspond au 68 e caractere depuis le debut du texte contenu dans 1' instance 
citation, en commencant a compter a partir de 0. En revanche, le nombre 78 ne correspond 
pas au nombre de caracteres a mettre en forme depuis la premiere valeur, mais au numero 
du caractere de fin de la plage de texte a mettre en forme. Contrairement au premier para- 
metre, il faut compter le premier caractere de la chaine a partir de 1. Voici un exemple 
complet (un texte dynamique intitule ci tati on a ete prealablement cree sur la scene) : 

citation. text = "'Un bon maitre a ce souci constant : enseigner a se passer de lui.' 
Andre GIDE."; 

var styleAuteur:TextFormat = new TextFormatt ) ; 

styleAuteur.bold=true; 

citati on. setText Format (styleAuteur, 68, 78) ; 

Vous obtenez : 'Un bon maitre a ce souci constant : enseigner a se passer de lui.' 
Andre GIDE. 

II sera parfois difficile de connaitre le numero d'index a partir duquel la mise en forme 
doit commencer. Vous pourrez alors utiliser la methode 1 ndexOf ( ) qui permet de connaitre 
la valeur que vous recherchez. 

t race ( citati on. text. indexOf ("Andre") ) ; 

Cette ligne d'instruction renverra le nombre 68, e'est-a-dire l'index a partir duquel ce mot 
(sa premiere lettre) est rencontre. 
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II est tout a fait possible d'appliquer plusieurs mises en forme a l'aide de plusieurs instances 
de la classe TextFormat( ) a un meme texte dynamique ou de saisie. 

citation. text = "'Un bon maitre a ce souci constant : enseigner a se passer de lui.' 
*Andre GIDE."; 

var styleAuteur:TextFormat = new TextFormat( ) ; 

styl eAuteur . bol d=t rue ; 

ci tat i on. setText Forma t( sty leAuteur, 68, 78) ; 

var styleAdjectif :TextFormat = new TextFormat( ) ; 

styleAdjectif .ital ic=true; 

styleAdjectif .letterSpacing = 3; 

ci tati on. setText Format( styleAdjectif ,25,34) ; 

Encapsuler une police de caracteres 

Fichier de reference : Chapitrel4/texte3.fla 

Dans les deux premiers exemples que nous venons d'aborder, nous n'avons pas specifie 
la police de caracteres ; pourtant cela aurait ete tres simple : 

var styleTitreAccueil :TextFormat = new TextFormat( ) ; 
styleTitreAccueil . color=0x474763; 
styleTitreAccueil .font = "Futura"; 
titreAccueil .setText Format (styleTitreAccueil ) ; 



Remarque 

ti treAccuei 1 est le nom d'instance d'un texte dynamique present sur la scene. 



Mais que se passe-t-il lorsqu'un internaute consulte une animation qui utilise une police 
ne se trouvant pas sur son ordinateur ? 

La reponse est malheureusement logique : le lecteur Flash substitue la police manquante 
par une autre ! Ann que tous les internautes puissent visualiser une animation avec la 
police que vous avez choisie, vous devez alors l'incorporer. Si vous le realisez a partir de 
1' interface en cliquant sur le bouton Integrer de la palette Proprietes, cela ne pose pas de 
probleme. En revanche, lorsque vous creez, via 1' ActionScript, un texte dynamique ou un 
texte de saisie sur la scene, vous ne pouvez pas prealablement cliquer sur le bouton Inte- 
grer. Voici une procedure que vous pouvez suivre afin qu'au moment de l'exportation de 
1' animation, la police choisie soit encapsulee dans le fichier SWF. 



Rappel 

Les textes statiques d'une interface sont automatiquement vectorises : il est alors inutile d'incorporer la 
moindre police. La procedure ci-dessous s'applique done aux textes dynamiques et aux textes de saisie. 



1. Commencez par importer une police dans la Bibliotheque de votre animation (via 
le menu local deroulant accessible en haut a droite de la bibliotheque, commande 
Nouvelle police. . .). 
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Proprietes des symboles d« poli 








Nom : Century la Gothic 
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Police : Century Gothic 
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Style : Q eras fj Texte bitmap 
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Figure 14-2 

Le nom que vous donnez d la police ne sert qu 'a etre reconnu au sein de la Bibliotheque. 

2. Effectuez un clic droit sur la police que vous venez de placer dans la Bibliotheque et 
selectionnez la commande Liaison. . . 

3. Cliquez sur la case Exporter pour ActionScript et donnez un nom de classe. 



Proprietes de liaison 



Identihant : 
Classe : 



Classe de base : nash.text.Font 



^JPH ( Annuler ) 

■00 



liaison: Exporter pour ActionScript 

'~ Exporter pour l« partage a I'execution 

Exporter dans la premiere image 

_ Importer pour le partage a ('execution 

URL: 



Figure 14-3 

Pen importe le nom de la classe que vous donnez d la police, mais vous ne devez pas utiliser de caracteres 
speciaux ou accentues, ni mime d'espace. 



4. Fixez la propriete embedFonts de votre texte dynamique a true. 

5. Faites reference a la propriete font de la classe TextFormat( ) et passez en parametre le 
nom de la police que vous aviez importee. 

Voici le script general que vous devriez obtenir pour afheher un texte lisible avec la police 
de votre choix, sur n'importe quel ordinateur. 

var titreAccueil :TextField = new TextFieldO; 
titreAccueil .text = "Yazo"; 
titreAccueil .embedFonts = true; 

var styleTitreAccueil :TextFormat = new TextFormat( ) ; 
styleTitreAccueil . font=" Century Gothic" ; 
titreAccueil . setText Format (styleTitreAccueil ) ; 

addChild( titreAccueil ) ; 
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Afin qu'il n'y ait aucune ambiguite, precisons que le nom Century Gothic est celui de la 
police qui figure dans la liste des polices accessibles a partir de la palette Proprietes. 



Mettre en forme un texte en HTML 

Avant d'apprendre a mettre en forme un texte grace a 1' utilisation de balises HTML, nous 
devons preciser un point tres important. A travers tous les exercices abordes depuis le 
debut dece chapitre, pour placer uncontenu dans une instance de TextFieldO nous avons 
utilise la propriete text. Nous allons maintenant devoir utiliser celle qui s'intitule html Text. 

La technique est extremement simple car il suffit de placer une balise HTML correcte 
dans votre texte. 



" 



tation.html Text = "'Un bon maitre a ce souci constant : enseigner a se passer 
de lui.' <b>Andre GIDE</b>."; 



Examinez l'exemple suivant ou de nombreuses balises ont ete inserees pour mettre en forme 
cette citation. 



Apprendre dans un livre aux ecoliers Ieur languc natalc est 

quelque chose de monstrueux. quand on y pen.se. Anatole 

France. Pierre Noziere. Projet Gutenberg 



I 



Figure 14-4 

Cette mise en forme des caracteres a ete obtenue a Vaide de balises html uniquement (les deux mots Pro jet 
Gutenberg sont en bleu). 

Pour aboutir a ce resultat, vous avez le choix entre deux solutions : 

• Vous creez le texte dynamiquement sur la scene puis vous inserez votre texte HTML 
avec les balises necessaires pour effectuer la mise en forme de certaines parties. 

• Vous creez un texte dynamique sur la scene a l'aide de l'outil Texte disponible dans 
1' interface de Flash, vous effectuez quelques reglages de mise en forme generale 
(comme le choix de la police) et vous inserez votre texte HTML avec les balises neces- 
saires pour completer la mise en forme de certaines parties. 

Dans ce dernier cas, vous n'auriez besoin de saisir que la ligne d'instruction suivante : 

Fichier de reference : Chapitrel4/texte6.fla 

titreAccueil .htmlText = "<p al i gn= ' justify '>Apprendre dans un livre aux ecoliers leur 
langue natale est quelque chose de monstrueux, quand on y pense.</p><p al ign=' right'> 
<b>Anatole France</b>, <i>Pierre Noziere</i>, <font color='#0000BB'>Projet Gutenberg 
</font></p>"; 
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Dans le cas ou vous souhaiteriez creer votre texte dynamiquement, voici les lignes 
d' instructions que vous devriez utiliser : 

Fichier de reference : Chapitrel4/texte7.fla 

var titreAccueil :TextField = new TextFieldO; 

titreAccueil .html Text = "Apprendre dans un livre aux ecoliers leur langue natale est 

quelque chose de monstrueux, quand on y pense.\n<b>Anatole France</b>, <i>Pierre 

Noziere</i>, <font color='#0000BB'>Projet Gutenberg</font>" ; 

titreAccueil .x = 20; 

titreAccueil .y = 20; 

titreAccueil .width = 300; 

titreAccueil .wordwrap = true; 

titreAccueil .mul til ine = true; 

addChild( titreAccueil ) ; 



Imbriquer des guillemets 

Dans le premier exemple que nous avons presente sur la gestion d'un texte HTML dans 
un texte dynamique, nous avons ete oblige d' utiliser les guillemets simples pour evoquer 
une citation : 

'Un bon maitre a ce souci constant : enseigner a se passer de lui.' Andre GIDE. 



Remarque 

II est possible de placer des guillemets simples a I'interieur de guillemets doubles et reciproquement : 
"II est 'parti' comme il est venu" et 'II est "parti" comme il est venu'. 



Nous n'aurions pas pu placer des guillemets doubles, car cela aurait ete interprets comme 
la fin du texte a aj outer et une erreur se serait produite, comme dans 1' exemple ci- 
dessous : 

I zoneInfo.html Text = "II a dit, je cite : "II faut apprendre a tout faire" pour etre 
^••autonome. " ; 
1087: Erreur de syntaxe : caracteres excedentaires detectes apres la fin du programme. 

En effet, essay ez de retirer le texte place apres les guillemets (II faut apprendre a tout 
faire" pour etre autonome. ") et vous decouvrirez que cela ne pose plus de probleme. 

Pour pouvoir inserer certains caracteres, vous devez done les echapper avec l'antislash (\) 
avant de les saisir. Ainsi, dans l'exemple qui va suivre, il n'y a plus de problemes. 

zonelnfo.htmlText = "II a dit, je cite : \"I1 faut apprendre a tout faire\" pour etre autonome."; 



Remarque 

Sur Macintosh, ce caractere peut etre obtenu avec le raccourci clavier Alt-Shift-: 
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Quelques exemples supplementaires 
Regler la couleur d'un texte 



„ 



zonelnfo.htmlText = "Le <font color='#0000CC> bleu </font> est une couleur qui te 
va bien. " ; 



ou encore : 

zonelnfo.htmlText = "Le <font color='#FF0000'> rouge </font> et le <font color=' 
| *-#00FF00'>vert</font>font du jaune."; 

Regler la police d'un texte 

Izonelnfo.embedFonts = true; 
zonelnfo.htmlText = "<font face='Kino MT'> II est en forme. </font> "; 

Dans le cas du reglage du choix d'une police, il est fortement conseille de l'importer dans 
1' animation. Consultez le developpement Encapsuler une police de caracteres, dans ce 
chapitre, pour decouvrir la methode adequate. 

Regler ralignement d'un texte 

zonelnfo.htmlText = "<p al ign='right'>Janvier, Fevrier, Mars</p> "; 
zonelnfo.htmlText += "<p al i gn= ' 1 eft ' >Avri 1 , Mai, Juin</p> "; 
zonelnfo.htmlText += "<p al i gn= ' right '>Jui llet . Aout, Septembre</p> "; 
zonelnfo.htmlText += "<p al ign='left'>Octobre, Novembre, Decembre</p> "; 

Comme vous pouvez le constater, vous avez la possibilite de definir des reglages diffe- 
rents dans un meme texte (plusieurs couleurs, plusieurs alignements differents, etc.), ce 
qui s'avere bien souvent plus pratique qu'avec la classe TextFormaU ). 

Si vous n'etes pas habitues a manipuler des balises HTML, ce livre ne peut vous aider a 
acquerir les bases necessaires : ce n'est pas l'un de ses objectifs. Vous pouvez, dans ce 
cas, utiliser un moteur de recherche pour decouvrir les nombreux sites qui sont dedies a 
l'apprentissage de ce langage. 

Pour celles et ceux qui connaissent deja ce langage, voici une liste des balises reconnues 
par le lecteur Flash : 

Tableau 14-1 Balises HTML reconnues par le lecteur Flash. 



Balise 




Attributs supportes 




Remarques 


<b> 








Des caracteres en gras doivent etre disponi- 
bles dans la police utilisee. 


<i> 








Des caracteres en italique doivent etre dispo- 
nibles dans la police utilisee. 


<u> 


<font> 




color, face et size 






<textform6 
I 


t> 


blockindent, indent, leading, 
leftmargin, rightmargin et tab: 


stops 
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Tableau 14-1 Balises HTML reconnues par le lecteur Flash. (Suite) 



Balise 


Attributs supportes 






Remarques 


<br> 








Le texte doit avoir I'attribut multiligne 
active. 


<P> 


align et class 








<li> 


<span> 


class 






La olasse de style CSS doit etre definie par 
un objet flash, text. Stylesheet. 


<a> 


href, event et target, 
athover et a:active 


a:l 


ink. 


Vous pouvez utiliser I'evenement link pour 
que le lien execute une fonction ActionScript 
dans un fichier SWF. 


<img> 


src, width, height, al 
vspace, id et checkPol 


ign, 
icyF 


hspace, 
ile 





Mettre en forme un texte avec les CSS 

Avant toute chose, il est important de savoir que les styles CSS s'appliquent a une 
instance de type TextFi el d ( ) qui contient du texte au format HTML ou XML. La mise en 
forme d'un texte a partir de styles CSS (Cascading Style Sheets) s'avere tres interessante 
pour plusieurs raisons : 

• De nombreux developpeurs connaissent deja les CSS. La consultation, la creation et la 
mise a jour de tels documents s'en trouvent facilities. 

• La mise a jour d'une animation (au niveau de l'aspect du texte) ne necessite pas une 
nouvelle publication du fichier FLA d'origine. 

• Une meme feuille de styles de type CSS peut etre partage entre une page HTML et un 
fichier SWF. 

Dans l'interface de Flash, la gestion des CSS peut se traduire par deux techniques : 

• En creant des styles en ActionScript. 

• En important une feuille de styles sous forme de fichier externe. 



Creer une feuille de styles en ActionScript 

Pour demarrer notre apprentissage des CSS, nous devons commencer par placer un texte 
dynamique sur la scene que nous intitulons leMessage. Soit vous utilisez l'outil Texte 
disponible dans TIDE de Flash, soit vous saisissez les lignes destructions ci-dessous : 

var leMessage:TextField = new TextFieldO; 

leMessage. x = 20; 
leMessage. y = 20; 
leMessage. width = 280; 
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leMessage. wordwrap = true; 
leMessage.multil ine = true; 

addChild(leMessage) ; 

A partir de ce moment-la, nous pouvons creer une feuille de styles. La procedure se 
decompose en deux temps : 

• la creation de la feuille de styles ; 

• la definition d'un style et son rattachement a la feuille de styles. 

Ivar styleDuProjet:StyleSheet = new StyleSheet( ) ; 
var styleCorpsDocument:0bject = new ObjectO; 

Le style styleCorpsDocument est maintenant cree ; nous devons a present definir la valeur 
des attributs que nous souhaitons utiliser. 

I styleCorpsDocument. letterSpacing = 2; 
styleCorpsDocument. col or = "#474763"; 

Pour terminer cette procedure, nous devons rattacher le style styleCorpsDocument a la 
feuille de styles styleDuProjet et faire appel a la propriete stylesheet de la classe Text- 
FieldO pour rattacher la feuille de styles styleDuProjet a 1' instance de type TextFieldO 
intitulee leMessage. 

IstyleDuProjet.setStyleC'body" , styleCorpsDocument) ; 
leMessage. stylesheet = styleDuProjet; 

Si nous tentons de placer le texte HTML ci-dessous dans notre instance 1 eMessage, nous 
constatons que la mise en page est effective. 

eMessage. htmlText = "<body>Le texte qui se trouve a cet endroit precis de la scene ne 
peut contenir plus de sens qu'il ne possede de signes typographiques. C'est pourquoi , 
il est important de comprendre le sens des mots alors que cette phrase n'a pas de 
sens.</body>" ; 



Remarque 

Faites appel a la propriete styl eSheet avant de definir le contenu HTML de votre instance de type Text- 
FieldO. 



Vous devriez obtenir un script global comme celui-ci : 

Fichier de reference : Chapitrel4/texte8.fla 

var leMessage:TextField = new TextFieldO; 

leMessage. x = 20; 
leMessage. y = 20; 
leMessage. width = 280; 
leMessage. wordwrap = true; 
leMessage.multil ine = true; 

addChild(leMessage) ; 
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var styleDuProjet:StyleSheet = new StyleSheet( ) ; 
var styleCorpsDocument :0bject = new ObjectO; 

styleCorpsDocument .letterSpacing = 2; 
styleCorpsDocument. col or = "#474763"; 

styleDuProjet.setSty let "body" , styleCorpsDocument) ; 
leMessage. stylesheet = styleDuProjet; 

leMessage.html Text = "<body>Le texte qui se trouve a cet endroit precis de la scene ne 
peut contenir plus de sens qu'il ne possede de signes typographiques. C'est pourquoi , 
il est important de comprendre le sens des mots alors que cette phrase n'a pas de 
sens.</body>" ; 

Si la procedure que nous venons de suivre ensemble vous parait un peu trop complexe, 
essayez de consulter le nchier texteSbis.fla qui contient moins de lignes d' instructions, 
dans la mesure ou celles qui permettent de creer le texte sur la scene ont ete supprimees. 

Fichier externe AS 

Fichiers dereference : Chapitrel4/texte9.f la et Styles. as 

package { 

import fl ash. display. Sprite; 
import fl ash. text. TextField; 
import fl ash. text. Stylesheet ; 

public class Styles extends Sprite { 

function Styles () { 

var leMessage:TextField = new TextFieldO; 

leMessage. x = 20; 
leMessage. y = 20; 
leMessage. width = 280; 
leMessage. wordwrap = true; 
leMessage. mul til ine = true; 

addChild(leMessage) ; 

var styleDuProjet:StyleSheet = new StyleSheet( ) ; 
var styleCorpsDocument:Object = new ObjectO; 

styleCorpsDocument. letterSpacing = 2; 
styleCorpsDocument. color = "#474763"; 

styleDuProjet.setStyleC'body" , styleCorpsDocument) ; 
leMessage. stylesheet = styleDuProjet; 

leMessage. htmlText = "<body>Le texte qui se trouve a cet endroit precis de la 
scene ne peut contenir plus de sens qu'il ne possede de signes typographiques. C'est 
pourquoi, il est important de comprendre le sens des mots alors que cette phrase n'a 
pas de sens.</body>" ; 
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Tableau 14-2 Proprietes CSS et ActionScript 



Norn de la 


Norn de la propriete 


Attributs supportes et commentaires 


propriete CSS 


en ActionScript 




color 


color 


Couleur du texte. Valeur sous forme hexadecimale : #FF0000 (les 
noms de couleurs ne sont pas supportes). 


display 


displ ay 


Valeurs supportees : inline, block et none. 


font-family 


fontFamily 


Lisle des polices a utiliser, separees par des virgules, classees 
par ordre de ohoix decroissant. Tous les noms de families de poli- 
ces peuvent etre utilises. Si vous specifiez un nom de police gene- 
rique, il est converti dans la police de peripherique appropriee. 
Les conversions de police suivantes sont disponibles : mono est 
converti en _typewriter, sans-serif en _sans et serif en 
_serif. 


font-size 


fontSize 


Taille du texte. Valeur de type nombre entier (par exemple : 12). 
Ne pas preciser I'unite (pixels ou points) car le lecteur Flash n'en 
tient pas compte. 


font-style 


fontStyle 


Style de texte. Valeurs supportees : normal et italic. 


font-weight 


fontWeight 


Style de texte. Valeurs supportees : normal et bold. 


kerning 


kerning 


Interlettrage par paire de lettres. Valeurs supportees : true et f al se. 
Le crenage est supporte uniquement pour les polices incorpo- 
rees. Certaines polices, telles que Courier New, ne supportent pas 
le crenage. La propriete de crenage n'est supportee que dans les 
fichiers SWF crees dans Windows, pas dans les fichiers SWF 
crees sur Macintosh. Cependant, ces fichiers SWF peuvent etre 
lus dans des versions de Flash Player autres que Windows et le 
crenage s'applique encore. 


leading 


1 eading 


Interlignage. Valeur de type nombre entier (par exemple : 3). Ne 
pas preciser I'unite (pixels ou points) car le lecteur Flash n'en tient 
pas compte. Une valeur negative resserre les lignes. Lespace est 
place apres chaque ligne. 


letter-spacing 


1 etterSpacing 


Interlettrage. Valeur de type nombre entier (par exemple : 3). Ne 
pas preciser I'unite (pixels ou points) car le lecteur Flash n'en tient 
pas compte. Une valeur negative resserre les lettres. Lespace est 
place apres chaque lettre. 


margin-1 eft 


marginLeft 


Marge de gauche. Valeur de type nombre entier (par exemple : 3). 
Ne pas preciser I'unite (pixels ou points) car le lecteur Flash n'en 
tient pas compte. 


margin-right 


marginRight 


Marge de droite. Valeur de type nombre entier (par exemple : 3). 
Ne pas preciser I'unite (pixels ou points) car le lecteur Flash n'en 
tient pas compte. 


text-al ign 


textAl ign 


Alignementdu texte. Valeurs supportees :left, center, right et 
justify. 


text-decoration 


textDecoration 


Soulignementdu texte. Valeurs supportees : none et underline. 


text-indent 


textlndent 


Decalage de la premiere ligne d'un paragraphe. Valeur de type 
nombre entier (par exemple : 3). Ne pas preciser I'unite (pixels ou 
points) car le lecteur Flash n'en tient pas compte. 
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Travailler avec des classes 

Dans l'exemple precedent, nous avons redefini la balise body, mais nous aurions tout 
autant pu en redefinir d'autres. II existe egalement une autre solution qui consiste a creer 
un selecteur de type classe. 

Voila comment nous pourrions adapter l'exemple precedent pour qu'il gere une classe. 

Fichier de reference : ChapitreH/textelO.fla 

var styleDuProjet:StyleSheet = new StyleSheett); 
var styleMotsCles:Object = new ObjectO; 

styleMotsCles.letterSpacing = 2; 
styleMotsCles.color = "#BB0000"; 

styleDuProjet.setStyleC .motCle" , styleMotsCles) ; 
leMessage. stylesheet = styleDuProjet; 

leMessage.html Text = "Le texte qui se trouve a <span class='motCle'>cet endroit 
precis</span> de la scene ne peut contenir plus de sens qu'il ne possede de <span 
class='motCle'>signes typographiques</span>. C'est pourquoi, il est important de 
comprendre le sens des mots alors que cette phrase n'a pas de sens"; 

A la lecture de ce script, quelle difference doit-on faire avec la redefinition d'une balise ? 
Observez bien la methode setStyleO. Son premier parametre possede un point pour 
signifier qu'il s'agit d'une classe. La deuxieme et derniere difference se situe au niveau 
du balisage du texte HTML. Nous avons fait appel a l'attribut class pour lequel nous 
avons indique le nom de la classe motCle. Nous utilisons la balise <span> arm de definir 
des zones dans le texte. 



Importation d'une feuille de styles sous forme de fichier externe 

Fichiers de reference : ChapitreH/textell.fla et styles. ess 

Comme nous l'evoquions en introduction a ce developpement dedie a la mise en forme a 
base de styles CSS, il est possible de charger un fichier externe au lieu de creer un objet 
pour lequel vous definissez des valeurs d'attributs. Voila comment vous devez proceder. 



Remarque 

Pour simplifier la comprehension du script qui va suivre, nous avons allege le code en supprimant les 
lignes d'instructions chargees de creer le texte dynamique sur la scene. Nous avons directement place un 
texte sur la scene que nous avons nomme 1 eMessage. 



1. Declarez les instances des classes StyleSheett ), URLLoaderO et URLRequestt ).Ces deux 
dernieres sont initialisees au moment de la declaration. 

var styleDuProjetrStyleSheet; 

var chargeur:URLLoader = new URLLoaderO; 

var adresseCSS:URLRequest = new URLRequestC'styles.css") ; 
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Le fichier styl es . ess contient les lignes suivantes : 

body { 

font-family: Verdana, An' al , Helvetica, sans-serif; 

font-size: 12px; 

color: 474763; 
} 
.citation { 

font-style: italic; 

color: #FF0000; 
} 

2. Effectuez la demande de chargement et enregistrez un ecouteur. 

Ichargeur.load(adresseCSS) ; 
chargeur.addEvent Listener (Event. COMPLETE, cssChargees) ; 

3. Nous terminons cette procedure en deflnissant la fonction de rappel cssChargees. 

(function cssChargees(evt:Event) ( 

Cette fonction contient tout le code qui va etre charge de : 

• Initialiser la classe StyleSheetO. 

• Placer le contenu du fichier CSS dans l'instance de la classe Styl eSheet( ). 

• Appeler la propriete stylesheet qui rattache la feuille de styles a l'instance leMessage 
(le texte dynamique sur la scene). 

IstyleDuProjet = new StyleSheetO; 
s ty 1 eDuPro j et. pa rseCSS(evt. target. data) ; 
leMessage. stylesheet = styleDuProjet; 

A present, vous pouvez placer le texte HTML qui contient la balise <body> que nous avons 
redefinie, ainsi que la classe citation. 

Le script global devrait ressembler a cela : 

var styleDuProjet:StyleSheet; 

var chargeur:URLLoader = new URLLoaderO; 

var adresseCSS:URLRequest = new URLRequestt "styles. ess") ; 

chargeur.load(adresseCSS) ; 

chargeur.addEvent Listener (Event. COMPLETE, cssChargees) ; 

function cssChargees(evt: Event) { 
styleDuProjet = new StyleSheetO; 
s ty 1 eDuP ro j et. pa rseCSS(evt. target. data) ; 

leMessage. stylesheet = styleDuProjet; 

leMessage. html Text = "<body>Le texte qui se trouve a <span cl ass='citation'>cet 
endroit precis</span> de la scene ne peut contenir plus de sens qu'il ne possede de 
<span class='citation'>signes typographiques</span>. C'est pourquoi , il est important 
de comprendre le sens des mots alors que cette phrase n'a pas de sens</body>" ; 

} 
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Gerer les evenements lies au texte 



Remarque 

Le chapitre 3 aborde un exemple different de ceux que vous allez decouvrir dans les lignes ci-dessous. Un 
fichier avec une approche orientee objet y est egalement propose. 



Comme nous l'evoquions au chapitre 3, lorsque vous aurez besoin de controler le focus 
d'un texte de saisie, sachez qu'il existe trois etats. Redefinissons les : 

• L'instant ou le champ prend le focus, c'est-a-dire le moment ou l'utilisateur clique 
dans le texte de saisie (FocusEvent.FOCUS_IN). 

• L'instant ou l'utilisateur change le contenu du champ, c'est-a-dire au moment de 
l'ajout ou de la suppression d'un caractere (Event. CHANGE). 

• L'instant ou le champs perd le focus, c'est-a-dire le moment ou l'utilisateur clique en 
dehors du texte de saisie (FocusEvent.FOCUS_OUT). 

Abordons tout de suite un premier exemple. Lorsque l'utilisateur clique dans un texte de 
saisie, nous aimerions vider le contenu actuel. 

var adresseMail :TextField = new TextFieldt); 

adresseMail .border = true; 

adresseMail .type = TextFieldType. INPUT; 

adresseMail .text="Veuil lez saisir votre adresse mail"; 

addChildtadresseMail ) ; 

adresseMail . add Event Listener (Focus Event. FOCUS_IN,verifierActi vationChamps) ; 

function verifierActivationChamps(evt: FocusEvent) { 

adresseMail .text="" ; 
} 



Remarque 

Un exemple similaire mais plus complet est presente dans le developpement Changer la casse d'un texte, 
dans ce chapitre. 



Dans ce deuxieme exemple, nous allons chercher a afficher sur la scene, au cours de la 
frappe, le nombre de caracteres contenus dans un texte de saisie. 

var message_txt:TextField = new TextFieldt); 
var compteur:TextField = new TextFieldO; 

message_txt. border = true; 
message_txt.type = TextFieldType. INPUT; 
message_txt.width= 200; 
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addChild(message_txt) ; 
addChild(compteur) ; 
compteur.x=210; 

message_txt.addEvent Listener (Event. CHANGE, compter NbreCaracteres) ; 

function compterNbreCaracteres(evt:Event) { 

compteur.text=message_txt.text.length.toString( ) ; 
} 

Apportons quelques commentaires a ce script un peu long. 

Nous commencons par creer deux instances de la classe TextFieldO car nous avons 
besoin de deux zones de texte : une premiere sert a la saisie du texte, 1' autre permet 
d'afficher le nombre de caracteres contenus dans le champ de saisie. 

Nous configurons et ajoutons ces deux instances et, enfin, nous creons un objet d'ecoute 
qui fait appel a l'evenement Event. CHANGE. 

Nous sommes obliges d'ecrire message_txt.text.length.toString() pour les raisons 
suivantes : 

• toString( ) permet de convertir message_txt. text. length en une chaine de caracteres. 

• La propriete 1 ength permet d'obtenir le nombre de caracteres contenus dans le texte de 
saisie. 

• La propriete text permet de faire reference au texte contenu dans l'instance message_txt. 

Ce script est particulierement interessant car il suffit de changer le contenu de la fonction 
de rappel compterNbreCaracteres pour l'adapter a n'importe quel besoin de surveillance 
d'une saisie d'un texte. 

Dans ce troisieme et dernier exemple, lorsque l'utilisateur clique en dehors de la zone de 
texte de saisie, le programme ajoute 1' extension .txt a la fin du texte. 

var nomFichier:TextField = new TextFieldO; 

nomFichier. border = true; 
nomFichier.type = TextFieldType. INPUT; 
nomFichier. width= 200; 

addChild(nomFichier) ; 

nomFi chi er. add Event Listener (Focus Event. F0CUS_0UT, verifier Extension) ; 

function verifierExtension(evt: FocusEvent) ( 

if (nomFi chi er. text. substr( nomFi chi er. length -4, 4) !=" .txt") { 
nomFi chier.appendTextC .txt") ; 

} 
} 
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Pour etre plus precis, ce script devrait d'abord s'assurer qu'une autre extension n'existe 
pas deja, ce que nous n'avons pas ecrit, pour ne pas complexifier davantage ces quelques 
lignes d' instructions. 

Controler le defilement dun texte 
Defilement vertical 

Si vous ne souhaitez pas utiliser un composant pour controler le defilement d'un texte, 
vous pouvez faire appel aux proprietes scrol 1 V et scrol 1 H de la classe TextFi el d( ). Elles 
permettent non seulement de faire denier des lignes comme vous le feriez avec un ascenseur 
habituel, mais egalement de realiser un ascenseur horizontal. 

L'exemple ci-dessous permet de faire denier les mois de l'annee. Deux occurrences de 
type clip ont prealablement ete placees sur la scene, puis nominees btAvant et btApres. 

Nous utilisons la propriete scrol 1 V pour faire defiler le texte, mais en ajoutant les lignes une 
a une. Nous pouvons ecrire indifferemment, 1 i steDeMoi s . scrol 1 V = 1 i steDesMoi s . scrol 1 V+l 
OU 1 isteDesMois .scrol 1 V++ 



var moisAnnee:Array = ["Janvier" , "Fevrier" , "Mars" ,"Avn" 
*»"Aout" , "Septembre" , "Octobre" , "Novembre" , "Decembre"] ; 
var 1 isteDesMois:TextField = new TextFieldO; 
for each (var entree:String in moisAnnee) { 
1 isteDesMois .appendText(entree+"\n") ; 



listeDesMois.width= 200; 
1 isteDesMois. height= 70; 
1 isteDesMois. selectable = false; 

addChildCl isteDesMois) ; 

1 i steDesMoi s.scroll V=5; 

btAvant .add Event Listener (MouseEvent.M0USE_D0WN,baisser) ; 
btApres .add Event Li stener(MouseEvent.MOUSE_DOWN,monter) ; 

function baisser(evt:MouseEvent) ( 
1 isteDesMois. scrol 1V++; 



' , "Mai " , "Juin" , "Juillet" 



function monter(evt:MouseEvent) { 

1 isteDesMois .scrol IV--; 
} 

Si nous souhaitions remonter ou abaisser le texte de plusieurs lignes, nous remplacerions 
1 isteDesMois. scroll V++ par 1 isteDesMois. scrol lV+=3. Pour remonter ou abaisser le texte a 
une ligne precise, nous pourrions utiliser la ligne d' instruction suivante : 



I 



1 is teDesMois.se roll V=5; 
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Rappel 

En assignant la valeur a la propriete scrol 1 V, vous replacez la premiere ligne du texte en haut de la 
zone de texte de saisie. 



Defilement horizontal 

Dans ce deuxieme et dernier exemple, nous faisons defiler un texte de droite a gauche ; 
nous n'utilisons plus la propriete scrol 1 V, mais scrol 1 H. 

var messageDefilant:TextField = new TextFieldO; 

messageDefilant.text="Le message qui se trouve dans cette zone sert a vous demontrer 
**qu'il est possible de proceder a un defilement horizontal."; 

messageDefilant.width= 200; 
messageDefilant.height= 30; 

addChild(messageDefilant) ; 

messageDefil ant. addEvent Li stener( Event. ENTER_FRAME, defiler) ; 

function defiler(evt:Event) { 

messageDefil ant. scrol 1H++; 
} 

Pour obtenir un affichage qui fait disparaitre completement le texte, vous pouvez inserer 
des espaces apres le dernier caractere de votre chaine. Vous pouvez effectuer la me me 
operation avant le premier mot afin de faire apparaitre progressivement le texte. Le nombre 
d'espaces depend de la largeur de votre texte dynamique (ou de saisie). 



Gestion des tabulations 

La gestion d'une telle mise en page necessite une preparation du texte a formater : il faut 
placer des sequences d'echappement (\t) entre chaque partie de colonne, pour inserer des 
tabulations. Vous devez ensuite instancier la classe TextFormat( ). 

Avant de vous presenter le script a generer, voici le resultat attendu : 



Prenoms 
David 
Marine 
Luna 


Noms 
TARDIVEAU 

HOUIN 

DE LAGRANDECHEVILLY 


Adresscs malls 
david<8yazo.net 
marine@yazo.net 
luna@yazo.net 



Figure 14-5 

Cette mise en forme du texte a ete realisee a Vaide de tabulations et d'une instance de la classe TextFormat. 
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Comme nous venons de l'evoquer, nous devons commencer par placer du contenu dans 
un texte dynamique (ou de saisie) ; nous utilisons done la methode appendText( ) qui est 
conseillee par Adobe. Pour separer les differentes informations qui doivent figurer dans 
les colonnes, nous utilisons la sequence d'echappement \t. Pour finir, nous instancions la 
classe TextFormat( ) afin de definir les valeurs du tableau assigne a la propriete tabStops. 

var tableauDonnees:TextField = new TextFieldO; 

tableauDonnees .appendText( "Prenoms\tNoms\tAdresses mails\n") ; 
tableauDonnees .appendText( "David\tTARDIVEAU\tdavid@yazo.net\n" ) ; 
tableauDonnees. appendText( "Marine\tHOUIN\tmarine@yazo.net\n") ; 
tableauDonnees. appendText( "LunaUDE LAGRANDECHEVILLYU1 una@yazo.net\n") ; 

tableauDonnees .width= 400; 
tableauDonnees . heigh t=300; 

addChild( tableauDonnees) ; 



var styleTableau:TextFormat = 
styleTableau. tabStops = [20, £ 



new TextFormat( ) ; 
).250]; 



tableauDonnees. setText Format (styleTableau) ; 



Remarque 

Les valeurs definies dans le tableau correspondent a une mesure precise, le pixel. 



Detecter le numero dune ligne cliquee 

Pour gerer des listes de mots ou de phrases comme dans l'exemple de la figure 14-6, il 
existe un composant intitule List qui est deja preprogramme et livre avec une multitude 
de proprietes et de methodes. Comme vous pouvez le constater, il possede un ascenseur 
par defaut ainsi qu'une surbrillance. II est tout a fait possible de le configurer pour qu'il 
n'afhche que le texte et ressemble alors a une instance de type TextFi el d. 

Figure 14-6 

Le composant List permet un defilement 

du texte et une reconnaissance facile du die 

sur une ligne. 



Lundi [± 


Ware. 


Mercrodi . 


Jcudi 


Vendredi [▼ 



Remarque 

Consultez le chapitre 15 qui traite de ce composant. 
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Revenons a notre propos principal, pour decouvrir la methode permettant de de teeter le 
clic sur une ligne precise d'une occurrence de type TextFi el d. 

Vous allez devoir utiliser la methode getLinelndexAtPointO qui renvoie, comme sonnom 
l'indique, le numero de ligne cliquee. Pour cela, vous devez preciser le nom d'une 
instance de type TextFi el d et des coordonnees x et y du clic. Nous utilisons generalement 
celles de la souris. Precisons que la premiere ligne d'un texte renvoie toujours la valeur 0. 

Dans les deux exemples ci-dessous, nous aimerions connaitre le numero de ligne cliquee 
pour pouvoir l'utiliser en tant qu'index d'un tableau. Dans un souci de simplification, 
nous n'avons pas utilise un fichier XML, ce qui aurait ete plus judicieux et aurait permis 
de stacker davantage d' informations. 

Voici un premier exemple qui presente les lignes d' instructions minimales et necessaires 
pour detecter une ligne cliquee. Deux textes dynamiques intitules listeParticipants et 
ageParticipant ont ete crees sur la scene. 

Fichier de reference : Chapitrel4/texte4bis.fla 

var numeroLigneCl iquee: Number; 

var anneesNaissance:Array = new Array (1945, 1963, 1902 . 1967, 1965,2006 ,2002) ; 

function connaitreNumeroLigneCliquee(evt:MouseEvent) { 
numeroLigneCl iquee = listeParticipants. get Li nelndexAtPointdistePartici pants. mouseX, 
**-l i steParti ci pants. mouseY) ; 
ageParticipant. text = anneesNaissance[numeroLigneCl iquee] ; 

} 

li steParti ci pants. addEvent Li stener(MouseEvent.MOUSE_DOWN,connaitreNumeroLigneCl iquee) ; 

Apportons quelques commentaires : nous commencons par declarer deux variables sur 
les deux premieres lignes du script. La premiere va stacker un nombre correspondant au 
numero de ligne cliquee, la deuxieme contient un tableau dont les valeurs correspondent 
a des annees de naissance. La premiere entree du tableau sera associee a la premiere ligne 
de notre liste de personnes. Nous creons ensuite un constructeur intitule connai treNumero- 
LigneCl iquee que nous allons executer lorsque l'utilisateur cliquera sur la liste de noms. 
Justement, lorsqu'un clic se produira, le numero de la ligne cliquee servira d'index pour 
rechercher une entree du tableau. 

Voici un deuxieme exemple qui gere et genere le contenu de la scene dynamiquement. 

Fichier de reference : Chapitrel4/texte4.fla 

var 1 isteParticipants:TextField = new TextFieldO; 

var ageParticipant:TextField = new TextFieldO; 

var numeroLigneCliquee:Number; 

var participants:Array = new ArrayC'Robert LED0UX" , "Eric DURAND" ."Jean DUPUIS", 

'•"Eva MARTIN", "Luc GRANDJEAN" , "Luna DUP0ND" , "Jules 0UVILLE"); 

var anneesNaissance:Array = new Array ( 1945 , 1963 , 1902 , 1967 . 1965 , 2006 , 2002 ) ; 

for each (var nom:String in participants) { 
1 i steParti ci pants. appendText(nom+"\n") ; 
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addChildd i stePartici pants ) ; 
addChild(ageParticipant) ; 
ageParticipant.x=120; 

1 isteParticipants. selectable = false; 

function connaitreNumeroLigneCl iquee(evt:MouseEvent) { 

numeroLigneCl iquee = listeParticipants.getLinelndexAtPointdisteParticipants.mouseX, 

*»li stePartici pants. mouseY) ; 

ageParticipant.text = anneesNaissance[numeroLigneCliquee] ; 
} 

li stePartici pants. addEvent Li stener(MouseEvent.MOUSE_DOWN, connaitreNumeroLigneCl iquee) ; 

En comparaison de l'exemple precedent, nous avons simplement genere dynamiquement 
le contenu qui avait ete cree manuellement a l'aide de 1' interface du logiciel. 



Recapitulatif des proprietes des classes TextField() et 
TextFormat() 

Voici un rappel sur les differents types utilises en progr animation. 

Stri ng : chaine de caracteres contenant des lettres et des nombres ; 

Number : nombre ; 

Boolean : true ou false ; 

Array : un tableau cree avec la classe eponyme ou avec une serie de valeurs entre 
crochets [] ; 

int : nombre entier compris entre -2 147 483 648 et 2 147 483 647 ; 

ui nt : nombre entier non signe compris entre et 4 294 967 295. 

Stylesheet et TextFormat signifient que les valeurs attendues sont des instances de ces 
classes. 

Les tableaux suivants detaillent le sens de chaque propriete. Certaines descriptions sont 
celles de l'aide officielle de Flash, d'autres ont ete reformulees. 
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Tableau 14-3 Proprietes de la classeTextField() 



Norn de la propriete 


Type attendu 


Description 


al ways ShowSelect ion 


Boolean 


Lorsque cette propriete est definie sur t rue et si le champ texte n'a 
pas le focus, Flash Player selectionne le contenu du champ texte 
en gris. 


antiAl iasType 


String 


Type d'anti-aliasing applique a ce champ texte. 


autoSize 


String 


Redimensionne un texte dynamique ou de saisie. Un alignement est 
egalement effectue en fonction du parametre passe a cette propriete. 


background 


Boolean 


Active/desactive le remplissage de la couleur d'arriere-plan du texte. 


backgroundColor 


uint 


Couleur de I'arriere-plan du champ texte. 


border 


Boolean 


Masque ou affiche un contour du texte. 


borderColor 


uint 


Couleur du contour du texte. 


bottomScrol 1 V 


int 


Nombre qui indique la ligne la plus basse visible dans le champ texte 
specifie. Cette propriete peut etre lue, mais pas modifiee. 


caretlndex 


int 


Permet de connaitre la position du point d'insertion (caret). Cette 
propriete peut etre lue, mais pas modifiee. 


condenseWhite 


Boolean 


Valeur booleenne qui indique si I'espace blanc supplemental (espace, 
saut de ligne, etc.) d'un champ texte HTML doit etre supprime. 


defaul tTextFormat 


TextFormat 


Specifie le format applique par defaut au texte qui vient d'etre insere, 
tel que le texte insere avec la methode replaceSelectedTextt ) 
ou le texte entre par un utilisateur. 


displayAsPassword 


Boolean 


Active ou desactive I'affichage d'etoiles au lieu de la saisie reelle 
du texte. 


embedFonts 


Boolean 


Active ou desactive I'encapsulage d'une police au fichier SWF. 


gridFitType 


String 


Type d'adaptation a la grille applique a ce champ texte. 


html Text 


String 


Permet de definir le texte au format HTML qui doit etre place dans 
I'instance (detype TextField( )). 


length 


int 


Permet de connaitre le nombre de caracteres contenus dans un 
texte. Cette propriete peut etre lue, mais pas modifiee. 


maxChars 


int 


Le nombre maximal de caracteres que le champ texte peut contenir, 
tels que saisis par un utilisateur. 


maxScrollH 


int 


Permet de connaitre le nombre maximal de pixels qui peuvent defiler 
avec la propriete scrollV. Cette propriete peut etre lue, mais pas 
modifiee. 


maxScroll V 


int 


Permet de connaitre le nombre maximal de lignes de texte qui peuvent 
defiler avec la propriete scrol 1 H. Cette propriete peut etre lue, mais 
pas modifiee. 


mouseWheel Enabled 


Boolean 


Active ou desactive la possibilite d'utiliser la molette de la souris 
pour faire defiler le texte. 


mul til ine 


Boolean 


Indique si le champ texte est un texte multiligne. 


numLines 


int 


Definit le nombre de lignes de texte d'un champ multiligne. Cette 
propriete peut etre lue, mais pas modifiee. 
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Tableau 1 4-3 Proprietes de la classe TextFieldQ (Suite) 



Norn de la propriete 

restrict 

scrol 1H 

scroll V 

selectable 
selectionBegin Index 

selectionEndlndex 



sharpness 




Number 


stylesheet 




Stylesheet 


text 




String 


textColor 




uint 


textHeight 




Number 


textWidth 




Number 


thickness 




Number 


type 




String 


useRichTextCl ' 


ipboard 


Boolean 



wordwrap 



Type attendu Description 

Stri ng Permet de preciser les caracteres autorises et interdits lors de la sai- 

sie du texte par I'utilisateur. 

int Permet de positionner le texte horizontalement par rapport au car- 

touche dans lequel il se trouve. 

i nt Permet de positionner le texte verticalement par rapport au cartou- 

che dans lequel il se trouve. 

Bool ean Indique si le champ texte peut etre selectionne. 

i nt Valeur d'index, basee sur zero, du premier caractere de la selection 

en cours. Cette propriete peut etre lue, mais pas modifiee. 

i nt Valeur d'index, basee sur zero, du dernier caractere de la selection 

en cours. Cette propriete peut etre lue, mais pas modifiee. 

Nettete des bords du glyphe dans ce champ texte. 

Associe une feuille de styles au champ texte. 

Permet de definir le texte qui doit etre place dans I'instance (de type 
TextFieldO). 

Couleur du texte dans un champ texte, au format hexadecimal. 

Hauteur du texte en pixels. Cette propriete peut etre lue, mais pas 
modifiee. 

Largeur du texte en pixels. Cette propriete peut etre lue, mais pas 
modifiee. 

Epaisseur des bords du glyphe dans ce champ texte. 

Type de texte. dynamic ou input (texte de saisie) 

Specifie si le formatage du texte peut etre copie et colle en meme 
temps que le texte. 

Bool ean Indique si le texte peut revenir a la ligne lorsqu'il atteint le bord droit 

des limites de I'instance dans laquelle il se trouve. 
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Tableau 1 4-4 Proprietes de la classe TextFormat() 

Norn de la propriete Type attendu Description 

Texte en gras. 

Texte en italique. 

Texte souligne. Ne melangez pas un texte en gras avec un soulignement. 

Texte avec une puce devant. 

Couleur. Valeur exprimee en hexadecimal (0x000000) ou avec un entier. 

Police de caractere. 

Taille du caractere. 

Tableau comprenant les arrets de tabulation. 

Alignementdu paragraphe : left, right, center ou justify 

Espacement entre les lignes. 

Espacement entre les caracteres. Attention de ne pas abuser de ce 
reglage avec de fortes valeurs : le texte devient tres rapidement illisible. 

kerni ng Bool ean Activer le crenage, c'est-a-dire le rapprochement de paires de lettres ou 

encore I'espacement entre certaines paires de lettres. A n'utiliser que pour 
des textes avec des grands corps et de preference en majuscule. Ne fonc- 
tionne pas avec certaines polices de caracteres (comme Verdana). 

Espacement de la marge de gauche. 

Espacement de la marge de droite. 

Retrait du paragraphe. Valeur exprimee en pixels. Revient a utiliser 
1 eftMa rgi n s'il n'y a qu'un seul paragraphe. 

Retrait de la premiere ligne de base . Valeur exprimee en pixels. 

La fenetre dans laquelle doit s'ouvrir le lien specifie par la propriete url . 

Lien vers une adresse Web. 



bold 


Boolean 


italic 


Boolean 


underl ine 


Boolean 


bullet 


Boolean 


color 


Hexa ou uint 


font 


String 


size 


Number 


tabStops 


Array 


al i gn 


String 


leading 


Number 


letterSpacing 


Number 



leftMargin 


Number 


rightMargin 


Number 


blocklndent 


Number 


indent 


Number 


target 


String 


url 


String 
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Les composants 
de type formulaire 



Un composant est un symbole preprogramme qui offre a l'utilisateur une interface de 
configuration de son contenu initial et de son apparence. II suffit d'en glisser un sur la 
scene a partir de la palette Composants, rubrique User Interface, pour decouvrir que la 
palette Parametres vous propose de renseigner quelques champs pour terminer de configurer 
F occurrence de votre composant. Sa configuration est tres simple, mais sa programmation 
Test un peu moins. 

Ce chapitre n'est pas uniquement dedie a l'apprentissage de modules destines a realiser 
des formulaires. Les composants, qualifies bien souvent d'elements de formulaires, servent a 
realiser toutes sortes d' interfaces et pas uniquement des ecrans comprenant des moyens 
de saisie pour evaluer les reponses d'un utilisateur. 

Parmi les nombreux composants proposes dans la palette eponyme, nous avons retenu 
une selection de ceux qui sont le plus souvent utilises. Quel que soit celui que vous 
choisirez, vous constaterez qu'il existe deux possibilites de creation d'une occurrence : 
soit un glisser-deposer, suivi d'une configuration via la palette Parametres ; soit des 
lignes d'instructions. C'est cette derniere solution que nous retiendrons pour chacun 
des composants. Avant d'aborder chaque specificite des composants de ce chapitre, il 
est important de garder a l'esprit que la gestion d'un tel symbole se decompose en trois 
parties : 

• la creation du composant (instanciation de la classe) ; 

• le remplissage et la configuration du composant ; 

• la programmation du composant. 
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Le composant ComboBox 

Fichier de reference : Chapitrel5/ComboBox.fla 

II s'agit certainement du composant que vous utiliserez le plus souvent, car il permet de 
selectionner simplement et rapidement une information dans un menu deroulant. 

Pour commencer, voici a quoi ressemble un ComboBox. 





S6todbnrwz un jourdoiasGimra T 




Land 


Mardi 


Moraodi 



Figure 15-1 

Une occurrence de type ComboBox permet de proposer a I 'utilisateur un menu deroulant pour y selectionner 
une information. 

Creation d'une instance 

Avant de faire appel a la classe ComboBoxt ), vous devez commencer par placer un compo- 
sant de ce type sur la scene, afin qu'il se retrouve dans la Bibliotheque. Une fois cette 
manipulation effectuee, vous pouvez garder cette instance ou bien la supprimer pour 
executer la ligne d' instruction ci-dessous. 

var semaine_comp: ComboBox = new ComboBoxO; 

Afin que les membres de cette classe soient accessibles, vous devrez prealablement 
importer cette derniere. 

import fl .controls. ComboBox; 

Vous aurez egalement besoin de gerer le contenu du ComboBox. Vous devez done importer 
la classe DataProvider. 

import fl .data. DataProvider; 

Une fois la classe ComboBox insfanciee, et avant de definir son contenu, vous devez configurer 
son apparence et sa position sur la scene. Utilisez alors les lignes d' instructions suivantes : 

Isemaine_comp.dropdownWidth = 200; 
semaine_comp. width = 200; 
semaine_comp.move(50, 50); 

La propriete dropdownWidth permet de definir la largeur (de la partie basse) du menu, 
lorsqu'il est deroule, alors que width determine la largeur de la partie haute du menu, 
celle qui affiche le texte selectionne. Vous ajoutez ensuite le composant dans la liste 
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d'affichage avec la methode addChi 1 d( ), afin qu'il soit visible sur la scene. Vous devriez 
obtenir pour 1' instant le script ci-dessous : 

import fl .controls. ComboBox; 
import fl .data.DataProvider; 

var semaine_comp: ComboBox = new ComboBoxO; 
semaine_comp.dropdownWidth = 200; 
semaine_comp. width = 200; 
semaine_comp.move(50, 50); 
addChild(semaine_comp) ; 

A ce niveau-la de la construction de l'occurrence, le menu est vide. Voici comment le 
remplir. 

Le remplissage et la configuration 

Comme nous l'evoquions dans le point precedent, vous allez creer une instance de la 
classe DataProviderO afin dedefinirses valeurs sous la forme {label : "Norn de la commande", 
data : "Val eur" } . Le label est le texte visible dans le menu, sous forme de commande, alors 
que la donnee (data) correspond a l'information recuperee lorsque le label associe est 
selectionne dans le menu. 

var semaineNoms:DataProvider = new DataProviderO; 

Pour ajouter une commande au menu, vous devez faire appel a la methode addltemO et 
passer en parametres un nom d' etiquette et la valeur associee. 

semaineNoms.addItem( {label : "Lundi " .data: "Monday") ) ; 

Vous pouvez ajouter ainsi de nombreuses commandes dans le menu en repetant cette 
derniere ligne d'instruction. Precisons tout de meme qu'il serait plus judicieux de creer 
un document XML ou un tableau pour les ajouter a l'aide d'une boucle for( ). En attendant, 
de facon tres simple, voila comment obtenir un menu suffisamment rempli : 

var semaineNoms:DataProvider = new DataProviderO; 



semaineNoms.addItem( {label 
semaineNoms.addItem( {label 
semaineNoms.addItem( {label 



"Lundi " .data: "Monday"} ) ; 
"Mardi " .data: "Tuesday"}) ; 
"Mercredi " .data: "Wenedsay"}) ; 



N'oubliez pas de terminer le remplissage de votre menu par l'execution de la ligne 
d'instruction ci-dessous : 

semaine_comp.dataProvider = semaineNoms; 

Elle permet de placer le contenu de votre instance de type DataProvi der dans l'instance de 
votre ComboBox pour constituer le menu deroulant. 

Nous terminerons cette deuxieme etape en ajoutant une derniere ligne d'instruction qui 
permet d'afficher un texte d'accueil tant que le menu n'a pas ete deroule. 

semaine_comp. prompt = "Selectionnez un jour de la semaine"; 
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La programmation d'une occurrence 

Vous n'avez pas encore programme l'instance de votre ComboBox : celle-ci ne vous sert 
done a rien ! 

Le script ci-dessous doit etre place a la suite de celui que nous venons de creer pour obtenir 
une instance de type ComboBox. 

semaine_comp.addEvent Listener (Event. CHANGE, jourSelectionne) ; 

function jourSelectionne(evt:Event) :void ( 

t race (evt. target. selected I tern. data) ; 
} 

Nous faisons reference a l'instance de type ComboBox qui s'intitule semai ne_comp pour enre- 
gistrer un ecouteur. Nous utilisons l'evenement Event. CHANGE pour pouvoir executer la 
ligne d'instruction contenue dans la fonction de rappel lorsqu'une commande du menu 
deroulant sera selectionnee. 

Dans un souci de simplification, l'objectif de cette animation est d'afficher un mot (l'un 
des jours de la semaine en anglais) dans la fenetre Sortie de TIDE de Flash. Nous executons 
done la commande trace( ) en demandant de lire la valeur de la propriete data de 1' occurrence 
utilisee pour la selection d'un jour. 

Rappelons que, dans la ligne d'instruction trace(evt. target. selectedlndex), evt. target 
fait reference a 1' occurrence utilisee. De ce fait, vous pourriez ajouter sur la scene autant 
d'instances de ComboBox que souhaite ; vous n'auriez qu'a enregistrer un ecouteur supple - 
mentaire sans etre oblige de redefinir la fonction de rappel (sauf si elle doit effectuer une 
action differente pour chaque instance). 

I semaine_comp.addEvent Listener (Event. CHANGE, commandeSelectionnee) ; 
mois_comp. add Event Listener (Event. CHANGE, commandeSelectionnee) ; 
annee_comp. add Event Listener (Event. CHANGE, commandeSelectionnee) ; 

Vous constatez ainsi que la programmation d'un composant de type ComboBox est tres simple, 
mais nous terminerons tout de meme par un conseil. 

Si vous devez manipuler davantage d' informations lors de la selection d'une commande 
dans un menu, nous vous conseillons de recuperer non pas la valeur associee a l'etiquette 
de la commande, mais plutot le numero d'index de la commande. Cela vous permet 
ensuite de pointer vers un noeud XML, dont le niveau dans l'arborescence ou l'index 
correspond a celui de la commande. 

I trace (evt. target. selected Index) ; 



Remarque 

Le genre du terme ComboBox est a la fois feminin et masculin car on parle d'un composant de type 
ComboBox, et par raccourci de composant ComboBox ou encore de ComboBox. Mais il est souvent fait 
reference a ce composant comme etant une liste deroulante : on dit alors une ComboBox. 
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Le composant bouton radio 



Remarque 

Placez un composant de type Radi oButton dans la bibliotheque de I'animation. 



Vous allez decouvrir qu'il devient tres vite fastidieux de gerer plusieurs occurrences de 
composant de ce type, car les differents reglages a effectuer pour en configurer un sont 
nombreux. 

Ann d' avoir une meilleure visibilite de cette configuration, nous vous proposerons un 
exemple, a la fin de ce developpement, qui ne fait pas appel a une classe mais gere plutot 
chaque occurrence a base de programmation sequentielle. 

1. Commencez par importer les deux classes necessaires a la gestion des boutons radio. 

I import fl .controls. RadioButton; 
import fl . controls. RadioButtonGroup; 

2. Comme vous le savez surement, les boutons fonctionnent par groupe ce qui permet 
d'en decocher un lorsque vous cliquer sur un autre. Nous devons done definir un 
groupe al'aide d'une instance de la classe RadioButtonGroupO. 

var categorieAges: RadioButtonGroup = new RadioButtonGroupC'groupl") ; 

3. Creez un bouton radio a l'aide de la classe RadioButtont ). 
var btnRadiol: RadioButton = new RadioButtont); 

4. Definissez les proprietes de 1' occurrence que vous venez de creer. 

btnRadiol. group = categorieAges; 
btnRadiol. 1 abel = "Moins de 18 ans"; 
btnRadiol. value = "0018"; 
btnRadiol. width=200; 

5. Terminez l'etape de creation du bouton radio en l'ajoutant a la liste d'affichage et en 
le positionnant sur la scene. 

I btnRadiol. moveOO. 120); 
addChild(btnRadiol); 

6. Pour programmer le bouton, afin qu'il reagisse au clic, nous enregistrons un ecouteur 
qui va gerer l'evenement MouseEvent. CLICK. 

btn Radi ol.addEvent Li stenertMouseEvent. CLICK, cl icSurBouton) ; 
function cl icSurBouton(event:MouseEvent) : void { 

valeurBoutonSelectionne.text= event. cur rentTarget.val ue; 
} 

Dans cet exemple, lorsque l'utilisateur clique sur un bouton radio, la valeur qui lui a ete 
affectee s'affiche dans un texte dynamique qui se trouve sur la scene et s' intitule val eur- 
BoutonSelectionne. 
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II ne reste plus qu'a repeter toutes ces etapes pour ajouter autant de boutons radio que 
necessaire. Comme nous l'evoquions au debut de ce developpement, il serait preferable 
de creer une classe pour gerer la creation d'un bouton radio avec tous ces parametrages. 



Bouton radio selectionne par defaut 

Utilisez la propriete sel ected pour definir I'une des occurrences comme bouton radio coche par defaut. 



Fichier de reference : Chapitrel5/BoutonRadi 0CaseaC0cher.fi a 

import fl . controls. RadioButton; 
import fl . controls. RadioButtonGroup; 

var categorieAges:RadioButtonGroup = new RadioButtonGroupC'groupl" 



var btnRadiol: RadioButton 
var btnRadio2: RadioButton 
var btnRadio3:RadioButton 
var btnRadio4: RadioButton 



new RadioButton( ) 
new RadioButton( ) 
new RadioButton( ) 
new RadioButton( ) 



btnRadiol. group 


= 


categorieAges; 


btnRadio2. group 


= 


categorieAges; 


btnRadio3. group 


= 


categorieAges; 


btnRadio4. group 


= 


categorieAges; 


btnRadiol. label 


= 


"Moins de 18 ans"; 


btnRadio2. label 


= 


"De 18 a 30 ans"; 


btnRadio3. label 


= 


"De 31 ans a 50 ans 


btnRadio4. label 


= 


"51 ans et plus"; 


btnRadiol. value 


= 


"0018" 




btnRadio2. value 


= 


"1830" 




btnRadio3. value 


= 


"3150" 




btnRadio4. value 


= 


"5199" 




btnRadiol. move(30 


120) 




btnRadio2.move(30 


150) 




btnRadio3.move(30 


180) 




btnRadio4.move(30 


210) 




btnRadiol. width= 


=200; 


btnRadio2. width= 


=200; 


btnRadio3. width= 


=200; 


btnRadio4. width= 


=200; 







addChild(btnRadiol) 
addChild(btnRadio2) 
addChild(btnRadio3) 
addChild(btnRadio4) 

btnRadio2. selected = true; 

btnRadi ol. add Event Li stener(MouseEvent .CLICK, cl icSurBouton) ; 
btnRadi o2. add Event Li stener(MouseEvent .CLICK, cl icSurBouton) ; 
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btnRadio3.addEvent Li stener(MouseEvent. CLICK, cl icSurBouton) ; 
btnRadio4.addEvent Li stenertMouseEvent. CLICK, cl icSurBouton) j 

function clicSurBouton(event:MouseEvent) :void { 

valeurBoutonSelectionne.text= event.currentTarget.val ue; 
} 



Le composant ColorPicker 



Remarque 

Placez un composant de type Col orPi cker dans la bibliotheque de I'animation. 



Ce composant est particulierement utile des que vous devez proposer a l'utilisateur un choix 
de couleurs a partir de l'interface. II vous evite de reprogrammer une classe detectant la 
couleur d'un pixel survole ou attribuee a une occurrence servant de pastille de couleurs. 

1. Commencez par importer les deux classes Col or Pi cker () et Color Pi ckerEventO. 

I import fl .controls .ColorPicker; 
import fl . events. ColorPickerEvent; 

2. Instanciez la classe ColorPickerO. 

var selecteurDeCouleur_comp:ColorPicker = new ColorPickerO; 

3. Ajoutez l'occurrence obtenue a la liste d'affichage de I'animation. 
addChild(selecteurDeCouleur_comp) ; 

4. Positionnez votre occurrence. 

IselecteurDeCouleur_comp.x=2.5; 
selecteurDeCouleur_comp.y=250; 

A present, il ne reste plus qu'a programmer l'occurrence afin de pouvoir recuperer la 
valeur de la couleur selectionnee. Nous allons utilisez l'evenement Col orPi ckerEvent et la 
constante CHANGE. 

selecteurDeCouleur_comp.addEvent Listener (ColorPicker Event. CHANGE, couleurSelectionnee) ; 

function couleurSelectionnee(evt:ColorPickerEvent) { 

trace(evt.currentTarget.hexValue); 
} 

Dans ce premier exemple, nous nous contentons d'afficher le code couleur selectionne 
dans la fenetre Sortie de FIDE de Flash. Consultez l'exemple du fichier Col orPi cker2 . f 1 a 
pour decouvrir comment nous appliquons la couleur a un texte. 

Fichier de reference : Chapitrel5/Col orPickerl.fi a 

import fl .controls. ColorPicker; 
import fl .events. ColorPickerEvent; 
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var selecteurDeCouleur_comp:ColorPicker = new ColorPicker( ) ; 
addChild(selecteurDeCouleur_comp) ; 
selecteurDeCouleur_comp.x=2.5; 
selecteurDeCouleur_comp.y=250; 

selecteurDeCouleur_comp.addEvent Li stener( Col or Picker Event. CHANGE, couleurSelectionnee) ; 

function couleurSelectionnee(evt:ColorPickerEvent) { 

t race Cevt. cur rentTarget.hexValue) ; 
} 



Changer la couleur d'un texte 

Si vous ne connaissez pas la classe TextFormatO que nous utilisons dans cet exemple, 
consultez le chapitre 14 qui traite de son utilisation. 

Fichier de reference : Chapitrel5/ColorPicker2.fla 

import fl .controls. Col or Picker; 
import fl .events. Col orPickerEvent; 

var selecteurDeCouleur_comp:ColorPicker = new ColorPicker( ) ; 
addChild(selecteurDeCouleur_comp) ; 
selecteurDeCouleur_comp.x=2.5; 
selecteurDeCouleur_comp.y=250; 

selecteurDeCouleur_comp.addEvent Listener (Col or Picker Event. CHANGE, couleurSelectionnee) ; 

function couleurSelectionnee(evt:ColorPickerEvent) { 
styleTitre. color = "Ox"+evt.currentTarget.hexValue; 

messageDeTest.setText Format ( sty! eTit re) ; 



var styleTitre:TextFormat = new TextFormatO; 
styleTitre. color = 0x000000; 
styleTitre. size = 20; 

messageDeTest.setText Format (styleTitre) ; 



Le composant List 

Nous avons souhaite conclure ce chapitre sur le composant List pour vous demontrer les 
nombreuses similitudes avec la classe ComboBox( ). Cela vous permettra de ne pas avoir a 
reapprendre le mecanisme de la gestion d'un composant de type List qui est le meme que 
celui d'un ComboBox. Pour verifier notre propos, nous vous invitons a ouvrir le fichier 
Listl.fla et a proceder aux modifications suivantes (il s'agit des lignes d'instruction 
suivies d'un commentaire) : 
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Remarque 

N'oubliez pas de placer un composant de type Li st dans la bibliotheque de votre animation. 



import fl .controls .ComboBox; // Changez ComboBox en List 
import fl .data.DataProvider; 



new ComboBoxO; // Changez ComboBox en List 
= 200; // Placez cette ligne en commentaire 



var semaine_comp: ComboBox = 
semaine_comp.dropdownWidth 
semaine_comp. width = 200; 
semaine_comp.move(50, 50); 
addChild(semaine_comp) ; 



var semaineNoms:DataProvider = new DataProvider( ) ; 



semaineNoms.addItem( {label 
semaineNoms.addItem({label 
semaineNoms.addItem( {label 
semaine_comp. data Provider 



"Lundi " .data: "Monday"} ) ; 
"Mardi " .data: "Tuesday"}) ; 
"Mercredi " .data: "Wenedsay"} ) ; 
semaineNoms; 



semaine_comp. prompt = "Selectionnez un jour de la semaine" 



// Placez cette ligne 
en commentaire 



semaine_comp.addEvent Listener (Event. CHANGE, jourSelectionne) ; 

function jourSelectionne(evt:Event) :void { 

t r ace (evt. target. selected I tern. data) ; 

//trace(evt. target. selected Index) 
} 

Le constat est flagrant : le resultat revient a creer une occurrence de type List car ces 
deux classes heritent des memes classes parentes. Voici tout de meme un exemple qui 
contient des proprietes propres a une occurrence de type Li st. 

Fichier de reference : Chapitrel5Listl.fla 

import fl .controls . List; 
import fl .data.DataProvider; 

var semaine_comp: List = new ListO; 
semaine_comp. width = 200; 
semaine_comp.move(50, 50); 
addChild(semaine_comp) ; 

var semaineNoms:DataProvider = new DataProvidert ) ; 



semaineNoms. add I tern ( {label 
semaineNoms. add I tern ( {label 
semaineNoms. add I tern ( {label 
semaineNoms. add I tern ( {label 
semaineNoms. add I tern ( {label 
semaineNoms. add I tern ( {label 
semaineNoms. add I tern ( {label 



'Lundi " .data: "Monday"} ) ; 
'Mardi " .data: "Tuesday"} ) ; 
'Mercredi " .data: "Wenedsay" 
'Jeudi " .data: "Thursday"} ) ; 
'Vendredi " .data: "Friday"} ) 
'Samedi " .data: "Saterday"} ) 
"Dimanche" .data: "Sunday"} ) 
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semaine_comp.dataProvider = semaineNoms; 

semaine_comp.rowCount = 3; 

semaine_comp.rowHeight = 15; // 20 pour que rowCount soit juste 

semaine_comp.addEvent Listener (Event. CHANGE, jourSelectionne) ; 

function jourSelectionne(evt: Event) :void { 

t race (evt. target. selected I tern. data) ; 

/ /t r ace (evt. target. selected Index) 
} 
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La creation 
de classes personnalisees 



Dans le chapitre 1 de ce livre, nous avons explique succinctement le fonctionnement de 
la programmation orientee objet a travers 1' interface de Flash, mais nous nous sommes 
appuyes sur 1' utilisation d'une classe du document. Nous n' avons pas eu a instancier une 
classe en particulier. 

Vous serez souvent amene a utiliser des lignes destructions qui se trouvent dans de 
nombreux programmes differents, mais la methode du copier-coller n'est pas la 
meilleure solution pour optimiser votre production. Vous allez plutot devoir creer des 
classes que vous pourrez ensuite appeler autant de fois que necessaire. 

Prenons l'exemple de rafhchage du temps ecoule lorsque vous ecoutez un son ou diffusez 
une video dans une animation. En aucun cas, vous ne pouvez obtenir l'affichage de la posi- 
tion de la tete de lecture sur la scene (dans un texte dynamique) sous la forme HH:MM:SS 
(comme 00:02:34 pour 2 minutes et 34 secondes). Vous pouvez connaitre le nombre de 
secondes ou de millisecondes ecoulees depuis le debut de la lecture d'un son ou d'une video, 
mais vous devez traiter les valeurs renvoyees par les proprietes position (classe SoundChannel ()) 
et pi ayheadTime (classe FLVP1 ayback( )) pour obtenir ce type de formatage. 

Creer une classe dans un fichier .as 

Fichiers dereference : Chapi trel6/Cl assePersonnalisee.fi a et Chapitrel6/Convert.as 



Note 

Si vous n'avez pas encore lu, dans le chapitre 1 , la partie dediee a la programmation orientee objet, faites- 
le avant de poursuivre votre lecture. 
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1 . Commencez par creer un fichier ActionScript que vous nommez Convert .as. 

2. Saisissez le code ci-dessous dans le fichier Convert. as. 
package { 

import flash. display. Sprite; 

publ ic class Convert { 

var tempsEcoule:Number; 

var minutes:*; 

var secondes:*; 

var tempsFinal :String; 

public function Convertttemps :Number=0) { 

tempsEcoule=temps; 
} 

public function affichageTemps( ) { 

minutes=Math.floor(tempsEcoule / 60); 

secondes=Math.floor(tempsEcoule % 60); 

minutes=minutes <= 9?"0" + minutes :minutes ; 

secondes=secondes <= 9?"0" + secondes:secondes ; 

tempsFinal=minutes + ":" + secondes; 

return tempsFinal ; 
} 
} 
} 

Analysons ensemble quelques details de ce script. 

• Les premieres lignes concernant la structure du document (le package et la classe) ont 
ete expliquees dans la partie dediee a la programmation orientee objet du chapitre 1 ; 
nous ne reviendrons done pas dessus. 

• Le type des variables (appelees aussi les proprietes de la classe) minutes et secondes 
peut vous surprendre car il s'agit d'une etoile ! Comme vous le savez peut-etre, arm de 
faciliter le deboguage d'un programme et surtout pour eviter des erreurs de typage, 
nous specifions le type d'une propriete ; cela se fait via un mot (precede de deux 
points) qui indique la nature du contenu stocke dans une variable. L'etoile que nous 
utilisons dans cet exemple permet d'eviter l'utilisation de deux variables et l'appel de 
la classe NumberO, car les proprietes minutes et secondes vont stacker successivement 
deux types d' informations de type Number puis String. 



Rappel 

II est tres dangereux de typer systematiquement une variable avec l'etoile car cela revient a ne pas typer 
et entraine, de ce fait, plus de risques d'erreurs de typage. 



Le constructeur Convert ( ) sert uniquement a recuperer puis passer le parametre indique 
lors de l'instanciation de la classe. 
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L' unique methode affichageTemps( ) de la classe Convert ( ) se termine par l'instruction 
return arm de renvoyer le resultat du calcul sous la forme HH:MM:SS 
(heures :minutes : secondes) . 



Instancier une classe 

Comme nous le precisions en introduction a ce chapitre, nous allons apprendre maintenant a 
instancier une classe. Pour cela, nous devons faire reference au mot Convert, suivi d'une 
paire de parentheses. 

ConvertO 

Commencez par definir un nom d'instance (ou nom de variable) suivi du typage corres- 
pondant a la classe que nous allons instancier. 

var tempsChansonl:Convert 

Ajoutez ensuite la classe a laquelle vous voulez faire reference. Precisez, par la meme 
occasion, la valeur a passer en parametres entre les parentheses. Pour convertir et obtenir 
l'affichage de trois durees, voici comment proceder. 

var tempsChansonl:Convert = new Convert(189) ; 
var tempsChanson2:Convert = new Convert(257) ; 
var tempsChanson3:Convert = new Convert(345) ; 



aff ichageDureeChansonl.text 
affichageDureeChanson2.text 
aff ichageDureeChanson3. text 



tempsChansonl.affichageTemps( ) 
tempsChanson2.affichageTemps( ) 
tempsChanson3.affichageTemps( ) 



Precisons qu'affichageDureeChansonl est le nom d'occurrence d'un texte dynamique 
present sur la scene. 



Remarque 

Dans notre exemple, nous convertissons des secondes, mais nous pourrions tout aussi bien convertir des 
millisecondes ; il faudrait alors adapter le code de votre classe de la fagon suivante : 

minutes=Math.floor(tempsEcoule / 1000/ 60); 

secondes=Math.floor(tempsEcoule / 1000 % 60); 



Rattacher une classe a un symbole 

Fichiers dereference : Chapitrel6/JeuCarte.fla et Chapitrel6/ModeleCarte.as 

Nous venons d'aborder, dans le developpement precedent, la technique qui consiste a 
creer puis appeler une classe. Nous allons a present decouvrir, dans l'exemple qui suit, 
qu'un symbole peut posseder sa propre classe sans qu'un appel soit necessaire. 

Vous devez realiser un jeu de cartes ou l'utilisateur doit effectuer des glisser-deposer 
d' occurrences (les cartes) sur la scene. Afin de ne pas devoir programmer la mobilite de 
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chaque occurrence du symbole que vous aurez defini comme carte modele, nous creons 
un fichier ActionScript avec le contenu ci-dessous : 

Script du fichier ModeleCarte. as : 

package { 

import flash. display. Sprite; 
import flash. events. MouseEvent; 

public class ModeleCarte extends Sprite { 

public function ModeleCarteO { 

addEvent Listener (MouseEvent .MOUSE_DOWN,rendreMobile) ; 

addEvent Li stener( MouseEvent . M0USE_UP , a rreterMobil ite) ; 
} 
public function rendreMobile(evt:MouseEvent) { 

startDragt ) ; 
} 
public function arreterMobil ite(evt:MouseEvent) { 

stopDrag( ) ; 
} 

} 
} 

Nous devons ensuite rattacher ce script au symbole, afin que toutes les occurrences issues 
de ce dernier puissent etre deplacees sur la scene. 

1 . Creez un symbole dans une animation que vous devez enregistrer dans le meme dossier 
que le fichier ModeleCarte. as. 

Lorsque vous allez effectuer le raccourci clavier F8 pour convertir votre selection en 
symbole, cliquez ensuite sur le bouton Avance (figure 16-1). Si ce dernier porte le 
nom d'etiquette Options de base, c'est que vous avez acces a la partie inferieure de la 
fenetre qui nous interesse (figure 16-2). 
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Figure 16-1 

Le bouton Avance permet d'acceder aux reglages de liaison d'un symbole. 



2. Cochez la case Exporter pour ActionScript afin d'activer la case de saisie Classe. 

3. Saisissez le nom du fichier ActionScript que vous venez de creer. 
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Figure 16-2 

Cochez la case Exporter pour ActionScript et precisez le nom de classe souhaite. 



4. Validez. 

Comme vous pouvez le constater, la procedure est extremement simple. II ne reste plus 
qu'a analyser les fonctionnalites communes a plusieurs occurrences issues d'un meme 
symbole. 

Nous avons utilise lafonction addEventListenerO dans la classe Model eCarte. Allons-nous 
pouvoir la reutiliser dans notre classe du document ? 

La reponse est oui ! En effet, nous pourrions penser qu'en redefinissant un nouveau 
gestionnaire d'evenement dans le tichier principal, la fonction addEventl_istener( ) pour- 
rait s'annuler. II n'en est rien, car il est tout a fait possible d'en definir plusieurs, les 
gestionnaires se cumulent. 

Dans l'exemple qui suit, nous allons demontrer deux points : 

• L' initialisation d'une occurrence peut etre effectuee a partir du fichier de classe d'un 
symbole (nous souhaitons par exemple que chaque occurrence issue du symbole que 
nous allons travailler, possede deja un effet de relief, emboss). 

• L' attribution d'un gestionnaire d'evenement ne constitue pas une redefinition lorsqu'un 
gestionnaire precedent a deja ete defini, mais un ajout de gestionnaire d'evenement. 

Nous avons prepare initialement deux fichiers comme nous l'avions fait dans l'exemple 
precedent : 

• Le fichier Symbol eAvecCl asse . f 1 a possede un symbole dont la classe de liaison est Bouton- 
Reacti f . Deux occurrences intitulees sommai re et qui tter ont egalement ete disposees sur la 
scene. Nous reviendrons sur ce detail un peu plus loin dans nos explications. 

• Le fichier BoutonReacti f . as possede les lignes d' instructions suivantes : 

package ( 

import fl ash. display. Sprite; 
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import flash. events. MouseEvent; 
import flash. text. TextField; 
import flash.fil ters. Bevel Filter; 

public class BoutonReactif extends Sprite { 

public function BoutonReactif ( ) { 

var serieFil tres:Array = new ArrayO; 

var biseaurBevel Filter = new Bevel FilterC ) ; 

biseau. distance = 3; 

biseau.blurX=7; 

biseau. bl urY=7; 

serieFilt res. push (biseau) ; 
filters=serieFiltres; 

nomEtiquette.text=name.tollpperCase( ) ; 

addE vent Li stener( MouseEvent. M0USE_D0WN,cl icSurLeBouton) ; 

} 

public function cl icSurLeBouton(evt:MouseEvent) { 

tracet "Oui " ) ; 



) 



} 
} 

Jusqu'a ce point, la procedure est la meme que celle que nous avons exposee dans l'exemple 
precedent. Ce qui differe reside dans le fait que nous allons maintenant preciser un nom 
de classe du document. Nous nous placons done sur le fichier Symbol eAvecClasse.fi a et 
dans la palette Proprietes (apres avoir clique en dehors de la scene), nous specifions le 
nom suivant : mai n. Voici le contenu du fichier. 

package { 

import flash. display. Sprite; 
import flash. events. MouseEvent; 
import flash. display. MovieClip; 

public class main extends Sprite { 

public function mainO { 
somma ire. add Event Li stenert MouseEvent. MOUSE_D0WN, act ionCl ic) ; 
somma ire. add Event Li stenert MouseEvent. MOUSEJP, a cti on Rel acherCl ic) ; 



public function actionCl ic(evt 
evt.currentTarget.scaleX=0.8 
evt.currentTarget.scaleY=0.8 



MouseEvent) 



public function actionRelacherCl ic(evt:MouseEvent) { 

evt.currentTarget.scaleX=l; 

evt. cur rentTarget. seal eY=l; 
} 
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Comme vous pouvez le constater, nous redefinissons un gestionnaire d'evenement pour 
l'occurrence sommai re. Ainsi, lorsque vous cliquerez sur cette occurrence, les deux gestion- 
naires executeront les lignes destructions qu'ils gerent. Vous pouvez ainsi controler 
plusieurs interactivites a des niveaux differents. 

Dans le fichier BoutonReactif .as, nous initialisons l'apparence des occurrences issues du 
symbole dont nous avons defini une classe de liaison, mais nous precisons surtout et 
egalement que le message Oui doit etre affiche dans la fenetre Sortie de TIDE de Flash 
lorsqu'un clic est effectue. 

Dans le richier main. as, nous donnons une autre instruction qui concerne toujours cette 
meme occurrence : au clic, sa taille doit diminuer avant de reprendre son echelle initiale 
au moment ou l'utilisateur relachera le bouton de la souris. 

Afin que le code que nous avons presentes dans ce dernier exemple puisse vous servir, 
voici quelques explications. 

Pourquoi aucun nom d 'occurrence n'est specif ie devant les membres 
d'une classe ? 

Vous l'aurez peut-etre remarque, les lignes d' instructions ci-dessous, extraites des scripts 
que nous venons de voir, ne contiennent pas de nom d'instance en debut de ligne. 

add Event Li stener(MouseEvent.MOUSE_DOWN, rend reMobile) ; 

startDragt ) ; 

f i 1 ters=seri eFi 1 tres ; 

Commencons par rappeler que le langage ActionScript utilise une syntaxe pointee. De ce 
fait, une methode ou une propriete doit toujours etre precedee du nom d'une occurrence. 
Et pourtant, nous decouvrons dans ces lignes que ce nom est absent. 

Dans l'exemple ci-dessous, l'occurrence curseur est rendue mobile : 

curseur.startDrag( ) ; 

Dans celui-ci, le symbole dont la classe de liaison sera Model eCarte generera des occur- 
rences mobiles. 

startDrag( ) ; 



Precision 

La ligne d'instruction ci-dessus qui n'est composee que d'une seule methode est la 17 e ligne du fichier 
Model eCarte. as. 



Si vous aviez oublie cette specificite, rappelons egalement que le principe d'une classe 
est de contenir un code qui va s'appliquer a toutes les instances qui en sont issues. Nous 
devons, de ce fait, rester neutre et ne faire aucune reference. 
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Le schema de la figure 16-3 illustre les relations qui existent entre un symbole, ses occur- 
rences et les lignes d' instructions contenues dans la classe a laquelle elle est rattachee. 
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public class ModeleC arte extends Sprite { 
public function ModeleCarte() { t 
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Figure 16-3 

Les proprietes, methodes et evenements d'une classe s 'appliquent aux occurrences d'une classe. 
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Explications sur le script du fichier BoutonReactif.as 

La premiere serie de lignes d' instructions ci-dessous a peu d'effet : elle permet simple - 
ment de creer un filtre sans pour autant l'affecter a une occurrence. Nous aurions pu nous 
contenter de ne saisir que les deux premiere lignes, car les trois dernieres ne sont pas 
indispensables ; elles permettent uniquement de configurer le style du filtre. 

var serieFil tres:Array = new ArrayO; 

var biseau:Bevel Filter = new Bevel Filter( ) ; 

biseau. distance = 3; 

biseau. blurX=7; 

biseau. blurY=7; 



Attention 

Pour que le code ci-dessus fonctionne correctement, nous devons imperativement importer la classe 
Bevel F1 1 ter en debut de package : i mport flash .fi Iters . Bevel Fi Iter. 



Une occurrence ne possede pas obligatoirement un seul filtre. De ce fait, nous devons creer 
un tableau qui va permettre de stacker d'eventuels filtres supplementaires. Pour terminer, 
comme vous le montre la derniere ligne ci-dessous, nous appliquons la propriete f i 1 ters 
a chaque occurrence en precisant la valeur seri eFi 1 tres. 

IserieFilt res. push (biseau) ; 
f i 1 ters=seri eFi 1 tres ; 

Si vous ouvrez le fichier que nous fournissons en exemple, vous noterez que les occur- 
rences qui se trouvent sur la scene sont nominees sommaireet quitter. Nous pouvons ainsi 
les utiliser comme valeur pour la propriete text du texte dynamique que nous avons place 
dans le symbole BoutonReactif. Afin que le titre de l'occurrence apparaisse en majuscule, 
nous utilisons la methode toUpperCase( ) qui a pour effet de basculer chaque caractere de 
la chaine en majuscules. 

nomEtiquette.text=name.toUpperCase( ) ; 

Pour finir, nous definissons un gestionnaire d'evenement pour les occurrences qui seront 
issues de cette classe. 

add Event Li stener(MouseEvent.MOUSE_DOWN,cl icSurLeBouton) ; 

Le parametre cl i cSurLeBouton est le nom de la fonction appelee au moment du clic. 



Explications sur le script du fichier main.as 



public class main extends Sprite ( 

public function mainO ( 

sommai re.addEventl_istener(MouseEvent.MOUSE_DOWN,actionCl ic) ; 

sommai re.addEventl_istener(MouseEvent.MOUSE_UP,actionRel acherCl ic) ; 
} 
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public function actionCl ic(evt 
evt.currentTarget.scaleX=0.8 
evt.currentTarget.scaleY=0.8 



MouseEvent) 



public function actionRelacherCl ic(evt:MouseEvent) { 
evt.currentTarget.scaleX=l; 
evt.currentTarget.scaleY=l; 



} 



Remarque 

Pour les non-anglophones, le nom de la classe est mai n pour evoquer la classe principale (qui se traduit 
par main en anglais). 



Ce script est des plus simples car il contient simplement deux gestionnaires d'evene- 
ments accompagnes des fonctions qu'ils appellent. Dans la mesure ou ce fichier Action- 
Script est celui d'un document FLA, nous devons specifier, cette fois-ci, les occurrences 
auxquelles nous souhaitons rattacher les gestionnaires. 



Rappel 

Le parametre evt.currentTarget permet de faire reference a I'occurrence a laquelle la fonction est 
rattachee par le biais de la fonction addEventLi stenerO. 
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Les packages et classes 

Comme vous avez pu le remarquer, avant de pouvoir faire reference a l'une des methodes 
ou proprietes d'une classe (meme a un evenement), vous devez importer cette derniere en 
precisant son chemin, c'est-a-dire le dossier dans lequel elle se trouve. II existe principa- 
lement deux classifications de packages : le flash et le fl ; tous deux contiennent de 
nombreuses classes et d'autres packages. Lorsque vous codez dans la fenetre Actions de 
TIDE de Flash, l'une des difficultes est de savoir quelles classes doivent etre importees 
pour pouvoir faire appel a telle ou telle methode ou propriete. 



Remarque 

L'un des avantages de la solution de developpement FlashDevelop (http://www.flashdevelop.org/ 
community/), est d'integrer automatiquement les lignes d'instructions en debut de programme qui 
contiennent les directives import. 



Pour vous aider a surmonter cette difficulte, retenez que les classes du package f 1 servent 
a gerer principalement les composants, les animations a base de code (Motion), les inter- 
polations a base de code (Tween) et les transitions a base de code (Transitions). II y a de 
fortes chances que vos premieres animations ne fassent done pas appel a de telles fonction- 
nalites. De ce fait, vous aurez davantage besoin d'importer les classes du package f 1 ash. 

Ces dernieres servent a gerer toutes les autres actions telles que la gestion de l'affichage 
a l'ecran, les evenements, le texte, les nitres, les bitmap, les medias, les transferts de 
donnees, les informations systeme, et quelques autres. 



Remarque 

II existe les classes de niveau superieur qui ne se trouvent pas dans les packages que nous venons 
d'evoquer. Elles servent a gerer la date (Date), les nombres (Number), les tableaux (Array), les chaines 
de caracteres (String) et les calculs mathematiques (Math). Vous n'avez done pas besoin de faire appel 
a la directive i mport pour specifier le chargement d'une de ces classes. 
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Les packages souvent utilises 

Dans la plupart de vos programmes, vous aurez surement besoin de faire appel aux memes 
classes, ces dernieres se trouvant surement dans l'un des packages du tableau A-l. 

Tableau A-1 Les principaux packages utilises dans un programme 

Norn du package Contenu ou role du package 

flash, events A utiliser des que vous gerez des evenements dans une animation. 

flash. display A utiliser des que vous gerez un affichage sur la scene (Sprite, MovieClip, Loader, 

Stage, Shape, Bitmap, BitmapData, etc.). 

flash. text A utiliser des que vous manipulez du texte sur la scene (TextField, TextFormat, 

StyleSheet, FontTextFieldAutoSize, etc.). 

flash.net Contient des classes permettant d'envoyer et recevoir des donnees a partir du reseau, 

telles que le telechargement d'URL et Flash Remoting. 

flash.ui Contient des classes d'interface utilisateur, telles que les classes permettant d'interagir 

avec la souris et le clavier. 

fl .controls Classes de composantde niveau superieur a utiliser avec List, Button et ProgressBar. 

f 1 . events A utiliser pour gerer les evenements propres aux composants. 

fl .video Classes a utiliser avec les composants FLVPlayback et FLVPlaybackCaptioning. 



Si le fonctionnement et l'utilisation de la directive import vous semblent encore abstraits, 
prenons l'exemple d'un script dans lequel vous programmez l'interactivite d'un bouton. 
Vous aurez besoin d'ecrire la ligne d' instruction ci-dessous arin que le compilateur de 
Flash sache qu'il doit d'abord apprendre a gerer les evenements (events) relatifs a la 
souris (MouseEvent). 

| import flash. events. MouseEvent; 

La directive import provoque la lecture des lignes d' instructions contenues dans un 
fichier de votre ordinateur afin que le compilateur de Flash sache ce qu'il doit ecrire dans 
le SWF final. Si vous ne saisissez pas prealablement cette ligne d'instruction, vous ne 
pourrez pas executer proprement le code suivant (cela generera une erreur) : 

nomOccurrMonBouton. add Event Listener (Mouse Event. CLICK. nomFonctionAppelee) ; 

Dans le tableau A-l, les trois premiers packages auxquels nous avons fait reference sont 
flash. events, flash. display et flash. text, voici respectivement leurs classes : 



Remarque 

Certaines definitions contenues des les tableaux ci-dessous sont extraites de la documentation officielle 
de Flash CS3. 
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Tableau A-2 Les classes du package flash.events 

Norn de la classe Instant du declenchement de I'evenement 

MouseEvent Importez cette classe des que vous avez besoin d'utiliser I'une des constantes suivantes : 

MouseEvent. CLICK, MouseEvent. DOUBLE_CLICK, MouseEvent. M0USE_D0WN, Mouse- 
Event. M0USE_M0VE, MouseEvent. MOUSE-OUT, MouseEvent. MOUSEJVER, Mouse- 
Event. MOUSEJJP, MouseEvent. MOUSE_WHEEL, MouseEvent .ROLLOUT et MouseEvent. 
ROLLJVER. Pour plus de details sur la gestion des evenements, consultez le chapitre 3 de 
ce livre, qui est dedie a cette specificite technique. 

NetStatus Event Des que vous etablirez des connexions entre deux machines avec les classes NetConnec- 

ti on, Net St ream ou SharedObject, vous aurez besoin de faire appel a NetStatus Event 
pour connaitre I'etat d'une connexion. 

TextEvent Cette classe devra etre importee des que vous aurez besoin de gerer un texte sur la scene, 

notamment avec I'une des constants suivantes: TextEvent. LINK et TextEvent. 
TEXT_INPUT. Consultez egalement la classe Focus Event pour gerer I'etat d'edition d'un 
texte de saisie. 

Focus Event Des que I'utilisateur deplace le focus sur un objet dans la liste d'affichage, utilisez I'une des 

constantes suivantes pour gerer ce changement de selection : FocusEvent.FOCUS_IN, 
FocusEvent.FOCUSJUT, FocusEvent.KEY_FOCUS_CHANGE et FocusEvent.MOUSE_FOCUS 
.CHANGE. 

TimerEvent Importez cette classe pour pouvoir gerer les deux evenements lies aux deux etapes qui 

accompagnent la classe TimerO : le passage d'un intervalle temps (TimerEvent. 
TIMER) et la fin d'un timer (Ti merEvent ,TIMER_COMPLETE) 

DataEvent Flash Player distribue des objets Data Event lorsqu'il a termine de charger des donnees 

brutes. 

ActivityEvent Flash Player distribue un objet ActivityEvent chaque fois qu'une camera ou un micro- 

phone signale qu'il est devenu actif ou inactif. 

AsyncErrorEvent Flash Player distribue un evenement AsyncErrorEvent lorsqu'une exception est renvoyee 

par le code asynchrone natif (LocalConnection, NetConnection, SharedObject ou 
NetStream). 

ContextMenuEvent Flash Player distribue des objets ContextMenuEvent lorsqu'un utilisateur genere ou utilise 
le menu contextuel. 

Error Event Flash Player distribue des objets Error Event lorsqu'une erreurentrainel'echec d'une ope- 

ration reseau. 

Event La classe Event est utilisee comme classe de base pour la creation des objets evenements , 

transmis aux ecouteurs d'evenements en tant que parametres lorsqu'un evenement se produit. 

EventDispatcher La classe EventDispatcher implements I'interface IEventDispatcher et est la classe de 

base de la classe Di spl ayObject. 

EventPhase La classe EventPhase fournit des valeurs a la propriete eventPhase de la classe Event. 

Ful 1 ScreenEvent Flash Player distribue un objet Ful 1 Screen Event chaque fois que la scene passe en mode 

d'affichage plein ecran ou quitte ce mode. 

HTTPStatusEvent Flash Player distribue des objets HTTPStatusEvent lorsqu'une requete reseau renvoie un 

code d'etat HTTP. 

IMEEvent Flash Player distribue des objets IMEEvent lorsqu'un utilisateur saisit du texte a I'aide d'un 

IME (editeur de methode d'entree). 

IOErrorEvent Flash Player distribue un objet IOErrorEvent lorsqu'une erreur entrame I'echec d'une 

operation d'envoi ou de chargement. 
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Tableau A-2 Les classes du package flash.events (Suite) 

Norn de la classe Instant du declenchement de levenement 

Flash Player distribue des objets Keyboa rd Event en reponse a une saisie utilisateur au clavier. 



KeyboardEvent 
ProgressEvent 

SecurityErrorEvent 
StatusEvent 

SyncEvent 



Flash Player distribue les objets ProgressEvent lorsqu'une operation de chargement a 
commence ou qu'un socket a regu des donnees. 

Flash Player distribue des objets Securi tyErrorEvent pour signaler une erreur de securite. 

Flash Player distribue des objets StatusEvent lorsqu'un peripherique, tel qu'une camera 
ou un microphone, ou un objet comme Local Connection publie son etat. 

Flash Player distribue des evenements SyncEvent lorsqu'une occurrence de SharedOb- 
ject distante a ete mise a jour par le serveur. 



Tableau A-3 Les classes du package flash.display 



Norn de la classe 

ActionScriptVersion 

AVMlHovie 

Bitmap 

BitmapData 

BitmapDataChannel 

Bl endMode 
CapsStyle 

Displ ayObject 

Displ ayObjectContainer 

FrameLabel 

GradientType 



Graphics 

Interacti veObject 
InterpolationMethod 



Description de la classe 

La classe ActionScriptVersion est une enumeration de valeurs constantes qui 
indiquent la version du langage du fichier SWF charge. 

AVMlMovie est une classe simple representant les clips AVM1, qui utilisent 
ActionScript 1.0 ou 2.0. 

La classe Bi tmap represente les objets d'affichage qui represented les images bitmap. 

La classe BitmapData vous permet d'utiliser les donnees (pixels) d'un objet Bitmap. 

La classe BitmapDataChannel est une enumeration de valeurs constantes qui desi- 
gned le canal a utiliser : rouge, bleu, vert ou transparence alpha. 

Classe qui fournit des valeurs constantes relatives aux effets de mode de fondu visuels. 

La classe CapsStyle est une enumeration de valeurs constantes qui specifient le 
style d'extremite a utiliser pour tracer les lignes. 

La classe Di spl ayObject constitue la classe de base de tous les objets susceptibles 
d'etre inseres dans la liste d'affichage. 

La classe Displ ayOb jectContai ner est la classe de base de tous les objets suscep- 
tibles de servir de conteneurs d'objets d'affichage dans la liste d'affichage. 

Lobjet FrameLabel contient des proprietes qui specifient un numero d'image et le 
nom d'etiquette correspondant. 

La classe GradientType fournit les valeurs du parametre type dans les methodes 
beginGradientFill ( ) et 1 ineGradientFil 1 ( ) de la classe flash.display. 
Graphics. 

La classe Graphics contient un ensemble de methodes permettant de creer une 
forme vectorielle. 

La classe Intera cti veOb j ect correspond a la classe abstraite de I'ensemble des objets 
d'affichage avec lesquels I'utilisateur peut interagir a I'aide de la souris et du clavier. 

La classe InterpolationMethod transmet des valeurs au parametre interpola- 
tionMethod par I'intermediaire des methodes Graphics. beginGradientFill () et 
Graphics.lineGradientStyleO. 
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Tableau A-3 Les classes du package flash. display (Suite) 

Norn de la classe Description de la classe 

JointStyle La classe JointStyle est une enumeration de valeurs constantes qui specifient le 

style de liaison a utiliser pour tracer les lignes. 

LineScaleMode La classe LineScaleMode fournit des valeurs pour le parametre scaleMode de la 

methode Graphics. lineStylet ). 

Loader La classe Loader permet de charger des fichiers SWF ou des fichiers d'image (JPG, 

PNG ou GIF). 

Loaderlnfo La classe Loaderlnfo fournit des informations relatives a un fichier SWF ou a un 

fichier d'image (JPEG, GIF ou PNG) charge. 

MorphShape La classe MorphShape represente les objets MorphShape figurant dans la liste d'affichage. 

MovieClip La classe MovieClip herite des classes suivantes : Sprite, DisplayObjectCon- 

tainer, Interacti veObject, DisplayObject et EventDispatcher. 

Pi xel Snappi ng La classe Pi xel Snappi ng est une enumeration de valeurs constantes destinees a la 

definition des options d'accrochage aux pixels par le biais de la propriete pi xel Snap- 
ping d'un objet Bitmap. 

Scene La classe Scene contient des propriet.es destinees a identifier le nom, les etiquettes et 

le nombre d'images d'une sequence. 

Shape La classe Shape sert a creer des formes legeres par le biais de I'interface de program- 

mation d'applications (API) de dessin ActionScript. 

Si mpl eButton La classe Si mpl eButton vous permet de controler toutes les occurrences de symbo- 

les de bouton dans un fichier SWF. 

SpreadMethod La classe SpreadMethod fournit les valeurs du parametre spreadMethod dans les 

methodes beginGradientFill () et 1 ineGradientStyle( ) de la classe Graphics. 

Spri te La classe Spri te est un bloc constitutif de base de la liste d'affichage : un nceud de liste 

d'affichage qui permet d'afficher des images et peut egalement contenir des enfants. 

Stage La classe Stage represente la zone de dessin principale. 

StageAlign La classe StageAlign fournit les valeurs constantes a utiliser pour la propriete 

Stage. al ign. 

StageDisplayState La classe StageDisplayState fournit des valeurs pour la propriete Stage. dis- 

playState. 

StageQuality La classe StageQuality fournit les valeurs de la propriete Stage, quality. 

StageScaleMode La classe StageScaleMode fournit les valeurs de la propriete Stage. scaleMode. 

SWFVersion La classe SWFVersion est une enumeration de valeurs constantes qui indiquent la 

version du format d'un fichier SWF charge. 



En fonction de la nature de vos projets, certains packages pourraient vous sembler indis- 
pensables alors qu'ils ne figurent pas dans le tableau A- 1. En vous presentant subjective - 
ment l'ensemble de ces tableaux, nous essayons simplement de mettre en evidence 
aupres des publics de developpeurs Flash neophytes, les packages frequemment utilises 
qui necessitent done un appel de classes et/ou de packages. 
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Norn de la classe 

AntiAliasType 

CSMSettings 

Font 

FontStyle 

FontType 

GridFitType 

StaticText 

Stylesheet 

TextColorType 

TextDispl ayMode 

TextField 
TextFieldAutoSize 

TextFieldType 

TextFormat 
TextFormatAl ign 

TextLineMetrics 

TextRenderer 

TextSnapshot 



Tableau A-4 Les classes du package flash.text 

Description de la classe 

La classe AntiAliasType fournit les valeurs d'anti-aliasing de la classe flash.text 
.TextField. 

La classe CSMSettings contientdes proprietes a utiliser avec la methode TextRenderer. 
setAdvancedAnti Al i asi ngTabl e( ) pour mettre en place une modulation continue du trait 
(CSM). 

La classe Font permet de gerer des polices integrees dans les fichiers SWF. 

La classe FontStyl e fournit les valeurs de la classe TextRenderer. 



La classe FontType contient les constantes enumerees embedded et device pour la pro- 
priete f ontType de la classe Font. 

La classe Gri d Fi tType definit des valeurs pour I'adaptation a la grille dans la classe TextFi el d. 

Cette classe represente les objets MorphShape figurant dans la liste d'affichage. 

La classe Sty 1 eSheet permet de creer un objet feuille de styles contenant des regies de for- 
matage de texte pour la taille et la couleur de la police ainsi que d'autres styles de f ormatage. 

La classe TextColorType fournit des valeurs de couleur pour la classe flash.text. 
TextRenderer. 

La classe TextDispl ayMode regroupe les valeurs qui controlent I'anti-aliasing des sous- 
pixels du systeme d'anti-aliasing avance. 

La classe TextFi el d permet de creer des objets d'affichage et de saisie de texte. 

La classe TextFi el dAutoSi ze enumere les valeurs constantes utilisees lors de la definition 
de lapropriete autoSize de la classe TextField. 

La classe TextFieldType enumere les valeurs constantes utilisees lors de la definition de 
la propriete type de la classe TextFi el d. 

La classe TextFormat represente les informations de mise en forme de caracteres. 

La classe TextFormatAl ign fournit des valeurs pour I'alignement du texte de la classe 
TextFormat. 

La classe TextLineMetrics contient des informations sur la position du texte et les unites 
de mesure d'une ligne de texte dans un champ texte. 

La classe TextRenderer permet d'exploiter la fonction avancee d'anti-aliasing des polices 
incorporees. 

Les objets TextSnapshot permettent de travailler avec du texte statique dans un clip. 



Les autres packages 

Dans un souci d'exhaustivite, nous vous presentons ci-dessous, tous les packages qui ne 
figuraient pas dans le tableau A- 1. Consultez l'aide en ligne de Flash pour decouvrir les 
differentes classes contenues dans ces packages. 
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Tableau A-5 Les classes des packages utilises ponctuellement 



Norn du package 


Contenu ou role du package 


adobe. uti Is 


Fonction (MMExecute) et classes utilisees (CustomActions et XMLUI) par les deve- 
loppeurs d'outils de programmation de Flash. 


fl .accessibil ity 


Classes qui permettent de prendre en charge I'accessibilite des composants de TIDE de 
Flash. 


fl .containers 


Classes qui chargent du contenu ou d'autres composants. 


fl . controls. dataGridClasses 


Classes utilisees par le composant DataGrid pour y organiser les informations 
contenues dans un tableau (une grille). 


fl . con trols.listCl asses 


Classes utilisees par les composants de type Li st pour y organiser les informations 
contenues dans une occurrence. 


fl . controls. progressBarClasses 


Classes dediees au composant ProgressBar. 


fl .core 


Classes liees a tous les composants. 


fl .data 


Classes servant a gerer les donnees associees a un composant. 


fl .events 


Classes d'evenement dediees aux composants. 


fl .lang 


L'unique classe Locale de ce package prend en charge le texte multilingue. 


fl .1 1 vepreview 


Classes dediees au comportement d'apergu en direct d'un composant dans TIDE 
(I'environnement de programmation) de Flash. 


fl .managers 


Classes servant a gerer les relations entre un composant et un utilisateur. 


fl .motion 


A utiliser pour gerer les interpolations de mouvement. 


fl .motion. easing 


Classes a utiliser pour gerer les variations de vitesses (acceleration, deceleration) 
dans un mouvement obtenu grace a la classe Moti on. 


fl .transitions. easing 


Classes a utiliser avec les classes fl .transitions pour creer des effets d'acceleration. 


fl .transitions 


Classes qui vous permettent d'utiliser I'ActionScript pour creer des effets d'animation. 


fl ash. accessibil ity 


Classes qui permettent de prendre en charge I'accessibilite du contenu et des appli- 
cations Flash. 


fl ash. errors 


Classes d'erreur couramment utilisees. 


fl ash. external 


L'unique classe External Interface de ce package permet de communiquer avec le 
conteneur de Flash Player. 


flash. filters 


Classes pour les effets de filtrage de bitmaps. 


flash. media 


Classes permettant de manipuler des ressources multimedia, telles que des sons et 
des videos. 


fl ash. printing 


Classes permettant d'imprimer le contenu Flash. 


fl ash. system 


Classes permettant d'acceder aux fonctionnalites de niveau systeme, telles que la 
securite, le contenu multilingue, etc. 


f lash, uti 1 s 


Classes d'utilitaires, telles que des structures de donnees comme ByteArray. 


fl ash.xml 


Classes servant a prendre en charge de I'ancien code XML. 


flash. geom 


Classes geometriques, telles que les points, les rectangles et les matrices de trans- 
formation, pour prendre en charge la classe BitmapData et la fonctionnalite d'inter- 
ception de bitmaps. 
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Integrer des tables de caracteres dans une animation 

Vous aurez parfois besoin d' integrer des polices de caracteres a certains textes dynami- 
ques ou de saisie, mais vous ne savez pas quels sont les glyphes contenus dans les tables 
ci-dessous ; faisons toute la lumiere sur ces dernieres. 



Rappel 

Lintegration d'une table de caracteres dans une animation Flash est necessaire lorsque vous souhaitez 
que les textes dynamiques et de saisie s'affichent correctement (suivant la police que vous avez choisie 
au moment de lintegration de vos zones de textes sur la scene). Par ailleurs, gardez a I'esprit qu'une telle 
integration augmente le poids de vos publications. 



Integrer des caracteres dans une animation 

Pour information et rappel, voici la technique qui permet d' integrer une table de caracte- 
res a un texte dynamique ou de saisie. 

1 . Selectionnez le texte dynamique ou de saisie a traiter sur la scene. 

2. Cliquez sur le bouton Integrer de la palette Proprietes. 

3. Cliquez sur la ou les tables de caracteres a integrer de la liste figurant sur la copie 
d'ecran de la figure A-2 (maintenez la touche Commande (Mac) ou Ctrl (Windows) 
pour selectionner plusieurs tables). 

Generalement, il faut integrer les tables Majuscules, Minuscules, Chiffres, Ponctuation, 
Latin basique et Latin I pour les caracteres accentues, pour etre sur d'afficher tous les 
glyphes (signes) d'un texte dynamique ou de saisie. Meme si certains caracteres accen- 
tues ne necessitent pas la table Latin I pour pouvoir etre visibles, la plupart d'entre eux se 
trouvent tout de meme dans cette table. Pour des textes de saisie ou l'utilisateur devra 
simplement renseigner un code postal ou un numero de telephone, il n'est pas necessaire 
d'integrer les majuscules et minuscules. 



Remarque 

Si vous omettez d'integrer une table de caracteres dans un texte dynamique ou de saisie, les caracteres 
faisant partie de cette description (la table de caracteres) ne seront tout simplement pas visibles comme 
le demontre la copie d'ecran de la figure A-1 . 
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Figure A-1 

L'utilisateur a saisi les informations suivantes : 
Marie-Noel Denetre avec le message Je ne 
pourrais peut-etre pas venir cet ete a Paris. 
Certains caracteres ne sontpas visibles car 
seules les majuscules et les minuscules ont ete 
integrees. 



Prenom 


Marie-Nel 






Nom 


Dent re 



Veuillez saisir votre message 



Je ne pourrais peut-tre pas venir avec elle cet 
ete Paris. 



Integration de caracteres 



Selectionnez les jeux de caracteres a integrer. Pour en 
selectionner plusieurs on en deselectionner un, udlisez Cmd 
+clic. 

Tous (5466S glyphes) 

Majuscules [A.Zi i27 glyphes) 

Minuscules |a..E] (27 glyphes) 

Chiffres [0..9] (11 cjlyphes) 

Ponttuation [!@#SC..,] (52 glyphes) 

Latin basique (95 glyphes) 

Kanajapouis (316 glyphes] 

Kanji japonais - Niveau 1 (3174 glyphes) 

Japonais (tous) (7 5 17 glyphes) 

Hangul do base corcen (3454 glyphes) 

Hangul coreert (Tous)(11772 glyphes) 

Chinois traditionnel - Niveau 1 (5609 glyphes) 

Chinois traditionnel (Tous) (18439 ajyphes) 

Chinois simplifie - Niveau 1 (13716 glyphes) 

Chinois (TousH2l664 glyphes) 

Thai (91 glyphes) 

Devanagari (128 glyphes) 

Latin I (383 glyphes) 

Latin etendu A (548 glyphes) 

Latin etendu 8 (SOOglyphes) 

Latin etendu supplemental re (548 glyphes? 

Crec (674 glyphes) 



Inclure ces caracteres : 

( Remplissage automatique ) 

Nombre total de glyphes : 
Ne pas integrer ) ( Annuler ) (- OK ) 



Figure A-2 

Les tables de caracteres integrees servent a afficher correctement les textes dynamique et de saisie sur Vecran 
d'un internaute qui ne possede pas la police que vous utilisez dans votre animation. 
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Tables des caracteres Unicode 

Comme l'exprime tres bien le titre de ce developpement, les tables des 128 signes auxquelles 
Flash fait reference lorsque vous vous appretez a integrer un ensemble de caracteres font 
appel a une nomenclature precise. La codification d'un signe se fait sur la base suivante : 
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addChild(), 37, 42, 46, 156, 177 
ADDED, 47 
addEventListener(), 50, 57, 85, 

102 
addltem, 77 
affichage 

buttonMode, 58 

trace(), XIV 
alpha, 72 
altKey, 57 

ancrer une palette, 21 
animation 

ralentir, 123 

Timer(), 121 

Tween(), 122 
approche de la programmation, 1 £ 
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ajouter une entree, 206 

associatif, 200 

creer, 199 

filtrer des entrees, 211 

lire une entree, 202 

modifier une entree, 205 

push(), 80 

supprimer une entree, 209 

tableau vide, 202 

trier les entrees, 210 
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attachMovieQ, 42 
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barre d'outils, 8 
bibliotheque, 12 
BlendMode, 75 
boucle, 225 
for(), 106 
buttonMode, 58 



callBack, 56 
case, 183,220 
chemin de classe, 3 1 
class, 27, 85 
classe, 371 

de niveau superieur, 49 

du document, 25 

instancier, 373 

personnalisee, 173, 371 

rattachee a un symbole, 373 
clavier, 63 
CMJN, 87 
codec 

On2 VP6, 3 
collision, 100 
color, 93 

ColorTransform, 93 
ComboBox, 77 
compilateur, 27 



composants, 361 

ColorPicker, 367 

ComboBox, 77, 362 

creer une occurrence, 362 

DataProvider, 77 

List, 368 

programmer une occurrence, 
364 

radio bouton, 365 

remplir une occurrence, 363 
constructeur, 28 

construction d'une interface, 143 
conteneur, 105 

d'objet d' affichage, 37, 38 
cosinus, 134 
couleur, 87 

color, 93 

colorTransform, 93 

hexadecimal, 87 

RVB, 92 
courbes, 134 

createEmptyMovieClipO, 42 
CSS creer une feuille, 345 
ctrlKey, 57 

currentTarget, 52, 59, 102 
curseur 

afficher le doigt, 58 

buttonMode, 58 

masquer, 94 
curveToQ, 161 



DataProviderQ, 77 

addltem, 77 
Date(), 133 
display, 85 
displayList, 35 
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DisplayObject(), 50, 52 
donnees 

charger, 274 

envoyer des, 278 

envoyer et recevoir, 279 

se connecter a une page, 276 

structure, 274 

verifier la fin d'un chargement, 
276 
double-clic, 58, 62 
doubleClickEnabled, 59, 62 
drag and drop, 94 

contraindre, 97 

rectangle, 97 
drawRect(), 162 
DropShadowFilter, 79, 84 



easeln, 130 
easelnOut, 130 
easeOut, 130 
easing, 125 
ecouteur, 57 
ENTER_FRAME, 66 
evenement, XIII, 58 

double-clic, 58, 62 

doubleClickEnabled, 59 

ENTER_FRAME, 66 

FOCUS JN, 64 

MOTION_FINISH, 127 

MOUSE_MOVE, 95 

MOUSE_UP_OUTSIDE, 99 

MouseEvent, 102 

RollOverOutSide, 59 

TEXT JNPUT, 64 

type, 60 
Event, 50 

EventCOMPLETE, 277 
events, 59, 85 
extends, 27, 65, 176 



fenetre 

actions, 13, 22 

scenario, 8 
fichier 

as, 175 

externe, 175 

Flash (AS 3.0), 25 



filters, 85 
nitres, 78 

DropShadowFilter, 79 
FLV, 263 
FLVPlayback 

addASCuePoint(), 271 

configurer, 265 

cuePoints, 270 

detection reperes, 271 

encodage, 272 

fullScreenButton, 268 

MetadataEvent.METADATA_ 
RECEIVED, 269 

pause(), 268 

play(), 268 

proprietes et methodes, 267 

seek(), 268 

skin, 263 

VideoEvent.PLAYHEADJJP 
DATE, 269 

volume, 268 
FLVPlayBack, 262 
FOCUSJN, 64 
fonctions, XIII, 30, 60, 239 

appel, 240 

avec parametres, 241 

de rappel ou callBack, 56, 241 

definir, 240 
for each(), 233 
for in(), 236 
for(), 106, 225, 229 

variable locale, 230 
forme, 157 

attributs du contour, 164 

attributs du fond, 167 

centrer, 163 

lineStyleO, 159 

lineTo(), 159 

moveTo(), 159 

piege, 162 

realiser un trace, 172 

shape, 159 

shape ou Sprite ?, 170 

tracer un rectangle, 161 

tracer une courbe, 160 

tracer une ellipse, 163 
forum 

mediabox, VII 
function, XIII, 23, 50, 85 
FutureSplash, 1 
Futurewave, 1 



gestion des occurrences, 35 
gestionnaire d'evenement, 56 

addEventListener(), 57 

callBack, 56 

clavier, 63 

currentTarget, 52 

ENTER_FRAME, 66 

FOCUSJN, 64 

MOUSE J)OWN, 50 

removeEventListenerO, 66, 96 

TEXT JNPUT, 64 
getChildAt(), 106 
getChildByNameO, 112 
getChildIndex(), 1 1 1 
gotoAndPlay(), 118 
gotoAndStopO, 115 
graphics, 159 
GUI, 24 

H 

H264, 263 

height, 72 
hexadecimal, 87 
histoire de Flash, 1 

I 

IDE, 24 

if(), 60, 101, 213 

&&/II, 216 

else, 217 

et/ou, 216 

operateur ternaire, 218 

operateurs, 214 
image 

charger une, 245 

cliquable, 247 

creer une classe de chargement, 
249 

importer, 172 

supprimer une, 249 
import, 27, 59, 85, 149 
importer 

image, 172 

classe, 32 
instance, XII, 22, 36 
interactivite, 19 
interface 

bibliotheque, 12 

construction, 143 

fenetre Actions, 13 
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fenetre scenario, 8 

icone, 6 

palette Proprietes, 10 
interpolation a base de code, 121 
iterations, 225 

K 

KEY_DOWN, 63 
KeyboardEvent, 63 
keyCode, 64 



langage 

difference entre AS 1 , 2 et 3, 
VIII 
largeur de la scene 

stage Width, 48 
liaison, 146 

ligne d'instruction, XIII 
lineStyleO, 159 
lineTo(), 159 
liste d'affichage, 35 
Loader(), 38, 173, 226, 245 

load(), 246 

M 

math 

cos(), 134 

sin(), 134 
mediabox, VII 
medias, 245 
methodes, 29 
mise en page, 40 
mode de surimpression, 75 
modes de programmation, 1 8 
MOUSE_DOWN, 50, 95 

gestionnaire d'evenement, 56 
MOUSE_MOVE, 95 
MOUSE_UP_OUTSIDE, 99 
mouseEnabled, 112 
MouseEvent, 23, 50, 59, 84, 95, 

102 
mouvement 

circulaire, 137 

d'une occurrence, 121 

planete, 139 
MOV, 263 
moveTo(), 159 

N 

NetConnectionQ, 262 



NetStreamO, 262 
new, XII, 49 
nexfFrameO, 118 
niveaux, 104 

nommer une occurrence, 22 
nouveau document, IX 
null, 50 
numChildren, 5 1 



objet d'affichage, 37, 105 
occurrence, XII, 22, 36 

ajouter dynamiquement, 42 

collision, 100 

contraindre glisser-deposer, 97 

en mouvement, 121 

effets, 78 

encre, 75 

filtres, 78 

getChildAtO, 106 

getChildIndex(), 1 1 1 

glisser-deposer, 94 

hifTestObjectO, 100 

mobile, 93 

mouseEnabled, 112 

setChildIndex(), 104 

startDragO, 93 

Surimpression, 75 
On2 VP6, 3 
opera teur, 214 

+=,66 

==,65 

ternaire, 218 



package, 26, 63 

palette, 2, 21 
proprietes, 10 

panneau, 2, 21 

php, 275 

plans, 104 

play(), 117 

POO, 24 

portee 

d'une fonction, 30 
d'une variable, 30 

Preload, 248 

premier plan, 104 

prevFrame(), 118 

private, 30 



programmation, 18 

orientee objet, IX, 24, 33 

sequentielle, X, 19, 33 

structuree, X, 19, 33 
propriete, XIII, 10,71 

rotation, 66 

scaleX, 68 

stage, 47 

x, 50 
public, 27, 30 
push, 80 



rectangle, 97 
regrouper des palettes, 21 
removeChild(), 49, 52 
removeChildAt(), 53 
REMOVED_FROM_STAGE, 50 
removeEvenfListener(), 66, 96 
RollOverOutSide, 59 
rotation, 66, 72 
RVB, 88, 92 



scaleX, 68, 72 
scale Y, 72 
scenario, 8 

gotoAndPlayO, 118 

naviguer, 114 

nexfFrame(), 118 

play(), 117 

prevFrame(), 118 
scene 

clic sur la, 62 

stage Width, 48 
script, 22 

setChildIndex(), 104 
Shape(), 159 
sinus, 134 
SmartSketch, 1 
son, 251 

arreter, 253 

balance, 257 

charger et lire, 25 1 

controler lancement, 252 

en boucle, 252 

gestionnaire 
SOUND_COMPLETE, 257 

jauge de chargement, 262 

jauge de lecture, 258 

niveau sonore, 255 

pause, 260 
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sprite, 27, 176 

addChild(), 37, 42 

ADDED, 47 

conteneur d'objet d'affichage, 
38 

currentTarget, 52 

Event.REMOVED_FROM, 50 

gestion des plans, 104 

getChildAt(), 106 

getChildByNameO, 112 

getChildIndex(), 1 1 1 

niveau, 111 

numChildren, 51 

removeChildAtO, 53 
Sprite(), 38, 40, 45, 46 
stage, 47 
stageWidth, 48 
startDragO, 93, 97 
stop(), 115 

supprimer un objet d'affichage, 49 
surimpression, 75 
SWF, 27 

switchO, 183, 220 
symbole 

liaison, 146 

placement dynamique, 146 



tableau, 80, 199 

a deux dimensions, 201 

ajouter une entree, 206 

associatif, 200 

creer, 199 

filtrer des entrees, 211 

lire une entree, 202 

modifier une entree, 205 

push(), 80 

supprimer une entree, 209 

vide, 202 

trier un tableau, 210 
temporiser une action 

Timer(), 67 
test, 213 

if(), 60, 101 
TextFormat 

color, 178 
text, XIV 
TEXTJNPUT, 64 
texte, 325 

a base de HTML, 342 

appendText(), 328 

caracteres UNICODE, 390 



changer la casse, 335 

couleur de contour, 329 

couleur de fond, 328 

couleur du texte, 329 

creer, 326 

CSS, 345 

defilement, 353, 354 

difference entre dynamique et 
saisie, 332 

dynamique, XIV 

encapsuler une police, 340 

evenements lies au, 35 1 

imbriquer guillemets, 343 

largeur automatique, 330 

manipuler, 334 

mefhode toStringO, 328 

mise en forme, 337 

mot de passe, 332 

multiligne, 330 

nombre de caracteres, 333 

numero de ligne cliquee, 355 

operateur +=, 328 

recherche de caracteres, 336 

remplacer du texte, 337 

restriction, 333 

tabulations, 354 

TextField(), 328 

toStringO, 328 
TextField, 39, 65 
TextField(), 162, 178 

proprietes, 357 
TextFieldAutoSize, 149 
TextFormat, 149 

setTextFormat(), 178 
TextFormatO, 178, 179, 337 

encapsuler une police, 340 

plage de caracteres, 339 

proprietes, 357 
TexfFormatAlign, 149 
this, 48 

currentTarget, 52 
Timeline 

voir Scenario, 1 14 
Timer(), 67, 121, 133 
trace dynamique, 157 
trace(), XIV 
transitions, 125 
tween 

easeln, 130 

easelnOut, 130 

easeOut, 130 

MOTION_FINISH, 127 



Tween(), 122, 125 

U 

url, 226 

URLLoader(), 277, 316 
URLRequest(), 173, 245, 316 
URLVariablesO, 277 



var, 50 

variable, 30, 60, 185 

constante, 197 

declaration, 186 

declarer, 129 

en POO, 193 

initialisation, 189 

initialiser, 129 

locale, 230 

modifier, 191 

nom d'une, 187 

portee, 191 

private, public, static, 194 

types, 189 
versions de Flash, 1 
video, 262 

On2 VP6, 3 

voir FLVPlayback, 262 
visible, 72 
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width, 72 



x, 50, 72 
XML 

ajouter un noeud, 318 

attribut, 295 

balise, 291 

balise auto-fermante, 293 

charger un fichier, 298 

connaitre le nom d'une balise, 
319 

creer un fichier, 290 

creer une source, 282 

fichier as, 299 

introduction, 281 
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lire un attribut, 303 

lire un noeud, 300 

modifier la valeur d'un attribut, 
317 

modifier la valeur d'un noeud, 
317 

nceud, 294 



nombre de noeuds, 320 
operateurs de recherche, 310 
parcourir arborescence, 314 
recherche de parent, 312 
rechercher des informations, 306 
rechercher par attribut, 308 
rechercher par nceud, 307 



rechercher plusieurs nceuds ou 

attributs, 312 
recherches croisees, 311 
recherches multicriteres, 311 
structure d'un fichier, 291 
toXMLStringO, 305 

XML(), 316 

XMLListQ, 317 



ActionScript 3 

Programmation sequentielle et orientee objet 

Une version qui marque un tournant 

L'ActionScript 3, base sur I'ECMAScript (revision 3 de l'ECMA-262), est un langage totalement oriente objet qui auto- 
rise cependant une syntaxe de programmation sequentielle. Tres proche du JavaScript, il ressemble egalement fortement 
au langage Java. Caracterise par une syntaxe differente de I'ActionScript 1 et 2, avec de nouvelles classes, proprietes, 
methodes et evenements, il est plus complexe dans son architecture, mais plus efficace et rapide a maitriser. 

Une approche complete et precise de I'ActionScript 3 

Cet ouvrage tres pedagogique detaille les nouveaux concepts de I'ActionScript 3, de la displayList aux ecouteurs, en 
passant par la nouvelle syntaxe utilisee en XML. Toutes les notions de base y sont expliquees, mais egalement les 
proprietes et manipulations elementaires d'occurrences, le controle des differents medias (texte, image, son, video], 
ou encore la gestion du XML. II s'adresse aussi bien aux developpeurs utilisant une programmation sequentielle qu'aux 
habitues de la programmation orientee objet : de nombreux exemples y sont en effet proposes dans les deux modes 
de programmation. Sur I'extension Web du livre, le lecteur pourra telecharger 180 animations Flash correspondant 
aux exemples des differents chapitres. 

A qui s'adresse cet ouvrage ? 

- Aux developpeurs web 

- Aux graphistes Flash qui maitrisent I'interface du logiciel 

Au sommaire 

Gestion des occurrences sur la scene • Liste d'affichage d'une animation • Methode addChildO • Gestion des eve- 
nements • Fonctionnement des gestionnaires d'evenements • Detecter un die ou la pression sur une touche du 
clavier • Surveiller la saisie de I'utilisateur • Temporisation d'une action avec I'evenement ENTER_FRAME ou la classe 
TimeK) • Controler une occurrence et naviguer sur la scene • Proprietes d'une occurrence • Encres, filtres et couleur 
• Rendre une occurrence mobile • Tester la collision entre deux occurrences • Gerer les plans entre plusieurs occur- 
rences • Desactiver la detection d'evenement sur une occurrence • Deplacer la tete de lecture du scenario ou d'un 
clip • Mouvements d'une occurrence sur la scene • Evenement ENTER_FRAME • Classes TweenO et Timerf) • 
Fonctions Math.sinl) et Math. cost) • Deplacement d'une occurrence d'un point a un autre de la scene • Construction 
d'une occurrence sur la scene • Symbole glisse vers la scene • Symbole avec liaison place sur la scene • Creation 
de traces vectoriels et de textes dynamiques • Importation d'images • Instanciation de classes personnalisees • 
Les variables • Declaration d'une variable • Initialiser une variable • Pourquoi typer une variable? • Modifier une 
variable • Portee d'une variable • Variables en programmation orientee objet • Les tableaux • Lire, modifier, ajouter 
ou supprimer une entree de tableau • Trier les entrees d'un tableau • Les structures conditionnelles • Structure 
conditionnelle if CD • Test avec switch!) • Les iterations : boucles fori) • Les fonctions • Chargement de medias sous 
forme de fichiers externes • Charger une image sur la scene • Charger et controler un son, une video ou des 
donnees (texte et PHP) • Gerer le XML dans Flash • Creer une source XML • Exploiter une arborescence XML dans 
une animation • La gestion du texte • Proprietes de la classe TexteFieldO • Manipuler une chaTne de caracteres • 
Mettre en forme un texte avec la classe TextFormatO, en HTML ou avec les CSS • Gerer les evenements lies au 
texte • Controler le defilement d'un texte • Gerer les tabulations • Composants de type formulaire • Creation de 
i personnalisees • Creer et instancier une classe • Rattacher une classe a un symbole. 




□avid Tardiveau 

Enseignant a GOBELINS, 
I'ecole de I'image, et 
developpeur Flash depuis 
1999, David Tardiveau 
assure des cours et 
des productions dans 
le domaine du multimedia 
off et on-line. II est aussi 
le fondateur et I'animateur 
du site www.yazo.net, 
site bien connu de 
la communaute Flash 
qui propose des tutoriaux 
sur I'ActionScript et des 
explications sur la partie 
animation du logiciel. 



Sur le site www.yazo.net/eyrolles 

- Telechargez les 1 80 scripts de I'ouvrage 

- Dialoguez avec I'auteur 
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